如何遍历 ReactTable 中的对象数组以显示数据？

Posted 2023-03-11

【中文标题】如何遍历 ReactTable 中的对象数组以显示数据？

【英文标题】：How to iterate over array of objects in ReactTable so as to display the data?

【发布时间】：2020-02-25 18:40:18

【问题描述】：

反应js： 我一直在尝试从 axios get request 构建一个 ReactTable(npm)。响应数据是数组格式的对象。所以我无法填充我的表。我收到类型错误：UN-handled Rejection (TypeError): resolvedData.map is not a function。我知道反应表映射无法映射到对象数组。我不知道如何映射和填充表。

我的 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: "[e-mail]", password: "$2a$10$ly84W9WLQr/Qih/AzN0PuOExctk5ohR9TxjtT.PUdsy4h6a9sY6pW", location: "Pune", …
1: _id: "5d36fc9c30ddd31638192498", name: "Raja", email: "[e-mail]", password: "$2a$10$KC5i6EkDb5SIqaMQPh.RoumQON6PEYZIDE4TM1oTH6xhmOTaD.FOy", location: "Durgapur", …
2: _id: "5d3ac84a86688123789e13b2", name: "Puja", email: "[e-mail]", password: "$2a$10$r17zOU1gTJvwoB.nBdRvi.qvDmsJhIlHbp//s8l0KEKgCEvbKoZAu", location: "Delhi", …
3: _id: "5d400d8f23eda427b0c020e0", name: "Goobi", email: "[e-mail]", password: "$2a$10$sW/Cs32ouY2ZBPQ0sQK7YeRUNkdRfjucf/Y4ykiPbZRtXn49rm1rm", location: "Durgapur", …
4: _id: "5d492a271294110f64196b2c", name: "Imran", email: "[e-mail]", password: "$2a$10$V5KWD60GrV1eNuOkDtTHVu9SjA2k6gshmwzWieYzJpus3fwhPWnbu", location: "Durgapur", …
length: 5
__proto__: Array(0)
__proto__: Object

我试图通过类似于此链接的方式进行映射，但它不起作用 React: Iterate over object, find array, and display array items

我也尝试过在访问器中进行映射，例如 react-table iterating over object array to print values in a column

我可能不正确。请看一下。这些有用吗？

渲染函数

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>

       );
    

填充表格：现在没有填充数据。

【问题讨论】：

试试this.state.usersList.user 看起来数据就在那里。

this.userList.user 不工作@jsw324

React 表是否能够映射对象数组，因为 axios 请求返回给我的是 user:Array(5)

【参考方案1】：

您传递的是对象而不是数组。像这样传递数据：

<ReactTable
               columns=columns
               data=this.state.usersList.user
               defaultPageSize=20
>

【讨论】：

我已经尝试过了，但这似乎不起作用，在控制台中字段仍然是空的，我可以看到 o/p。

【参考方案2】：

在处理 React Table 时需要记住几件事。我今天正在处理这段代码，发现 React Table 的 resolvedData.map 函数可以遍历数组或 [] 但是不是 默认情况下，React Table 无法迭代对象。
我发现错误的后端主代码， 响应是用用户对象格式封装的，我 通过删除 来更改它，然后我的回复在 [ ] 中缺少 [] 代码： await User.find( ).lean(true).then(user => return res.send(user);... //here 在我的代码开始工作之后，React Table 的resolvedData.map 函数可以显示我数据库中所有用户的列表，而无需使用 this.state.userList.user。 如果我在res.send(user) 中绑定响应 然后默认的地图功能在 上也不起作用。我的回复丢失了[data]，而是返回了[ ] 谢谢大家的帮助。