首页 > 解决方案 > 如何从 props 中获取 React-Table 中的 API JSON 数据?

问题描述

我是反应世界的新手,我面临将数据从 API 调用到列的问题react-table

考虑下面的代码:

  render() { 
        const { purchaseData } = this.props;
         console.log("Purchase Data", purchaseData)

       const columns = [
            {
              Header: "Items Id",
              accessor:"items_id",
            },
            {
              Header: "Supplier name",
              accessor:"supplier_name",
            },
            {
              Header: "Quantity",
              accessor:"quantity",
            },
        ]
return (
<div className="item-table">
   <ReactTable
      columns={columns}
      defaultPageSize={4}
      showPagination={false}
      noDataText={"No data"}
   >
   </ReactTable>
</div>
)
}

所以我相信根据我的方法调用数据的方法可能是错误的,对吧?但我怎么能得到正确的方法?

标签: reactjsapireact-table

解决方案


如果你使用react-table. 您应该为ReactTable. 有关于文档的示例。并且给出的道具应该是array。在console.log()我看到对象。你可以像这样传递它:

<ReactTable
      columns={columns}
      data={[purchaseData]}
      defaultPageSize={4}
      showPagination={false}
      noDataText={"No data"}
   >

推荐阅读