Как перебрать массив объектов в ReactTable, чтобы отобразить данные?

Reactjs: я пытался создать ReactTable (npm) из запроса на получение axios. Данные ответа находятся в объекте формата массива. Поэтому я не могу заполнить свою таблицу. Я получаю ошибку типа: UN-Handled Rejection (TypeError): resolvedData.map не является функцией. Я знаю, что карта таблицы реакции не может отображать массив объектов. Я не знаю, как отображать и заполнять таблицу.

Мой запрос axios.get

    componentDidMount(){
        const url="http://localhost:5000/api/users/tenantView";
        fetch (url,{
            method: "GET"
        }).then(response=> response.json()).then(usersList=>{
           console.log((usersList)) ;
           this.setState({
            usersList : usersList
           });            
        })
  }

Здесь я вижу ответ в консоли, данные загружаются правильно

{user: Array(5)}
user: Array(5)
0: {_id: "5d36f73f67665a1740620f55", name: "Pritam Kumar", email: "[email protected]", password: "$2a$10$ly84W9WLQr/Qih/AzN0PuOExctk5ohR9TxjtT.PUdsy4h6a9sY6pW", location: "Pune", …}
1: {_id: "5d36fc9c30ddd31638192498", name: "Raja", email: "[email protected]", password: "$2a$10$KC5i6EkDb5SIqaMQPh.RoumQON6PEYZIDE4TM1oTH6xhmOTaD.FOy", location: "Durgapur", …}
2: {_id: "5d3ac84a86688123789e13b2", name: "Puja", email: "[email protected]", password: "$2a$10$r17zOU1gTJvwoB.nBdRvi.qvDmsJhIlHbp//s8l0KEKgCEvbKoZAu", location: "Delhi", …}
3: {_id: "5d400d8f23eda427b0c020e0", name: "Goobi", email: "[email protected]", password: "$2a$10$sW/Cs32ouY2ZBPQ0sQK7YeRUNkdRfjucf/Y4ykiPbZRtXn49rm1rm", location: "Durgapur", …}
4: {_id: "5d492a271294110f64196b2c", name: "Imran", email: "[email protected]", password: "$2a$10$V5KWD60GrV1eNuOkDtTHVu9SjA2k6gshmwzWieYzJpus3fwhPWnbu", location: "Durgapur", …}
length: 5
__proto__: Array(0)
__proto__: Object

Я попытался отобразить по аналогии с этой ссылкой, но она не работает Реакция: итерация по объекту, поиск массива и отображение элементов массива

Я также попытался отобразить в аксессоре, как в response-table перебирает массив объектов для печати значений в столбце

Я могу ошибаться. Пожалуйста, посмотрите, это сработает?

Функция рендеринга

render() {
        const columns =[
            {

                Header:"User ID",
                accessor:"_id",
                sortable: false,
                filterable: false,
                style:{
                    textAlign: "left"
                },
                width: 100,
                maxWidth: 100,
                minWidth: 100,
            },
            {
                Header:"Name ",
                accessor:"name",
                filterable: false,

            },
            {

                Header:"Email",
                accessor:"email"
            },
            {

                Header:"Password",
                accessor:"password"
            },
            {

                Header:"Farm",
                accessor:"farm"
            },

        ]
       return(
           <ReactTable
           columns={columns}
           data={this.state.usersList}
           defaultPageSize={20}
           >

           </ReactTable>

       );
    }
}

Заполните таблицу: в настоящее время данные не заполняются.


reactjs node.js arrays mongoose react-table
person Community    schedule 30.10.2019    source источник
comment
попробуйте this.state.usersList.user похоже, что данные там живут.   -  person jsw324    schedule 30.10.2019
comment
this.userList.user не работает @ jsw324   -  person    schedule 06.11.2019
comment
Может ли таблица React отображать массив объектов, потому что запрос axios возвращает мне {user: Array (5)}   -  person    schedule 06.11.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы передаете объект вместо массива. Просто передайте данные вот так:

<ReactTable
               columns={columns}
               data={this.state.usersList.user}
               defaultPageSize={20}
>
person konradwww    schedule 30.10.2019
comment
Я пробовал это, но похоже, что это не работает, поля все еще пусты, а в консоли я вижу o / p. - person ; 06.11.2019

arrow_upward
0
arrow_downward

  1. There are several things to remember while handling with React Table.I was working today on this code and found out that resolvedData.map function of React Table can iterate over arrays or [{}] but not {}
    React Table cannot iterate over objects by default.
    1. My backend main code where I found error ,
      the response was encapsulated with user object format , I changed it by removing { } ,then my response was in [{ }] where [ ] was missing
      code:
      await User.find( ).lean(true).then(user => {return res.send(user);... //here
    2. После этого мой код начал работать, функция resolvedData.map в React Table могла отображать список всех пользователей в моей базе данных без использования this.state.userList.user.
      Если я привяжу ответ в res.send({user}), тогда также не будет работать функция карты по умолчанию {}. В моем ответе не было [{data}], скорее он возвращал {[ ]}
      Спасибо всем за помощь.
person Community    schedule 06.11.2019