M.D*_*Dan 8 json reactjs react-table
我想在反应表中显示嵌套的 JSON 数据。
我尝试过这样的:
render() {
const columns = [{
//Not Displaying
Header: 'Owner ID',
id: 'ownerid',
accessor: '_links.customer.href.ownerid', // <- i think this is wrong
Cell: this.renderEditable
},
{
//Displaying
Header: 'Price',
accessor: 'price',
Cell: this.renderEditable
}, {
Run Code Online (Sandbox Code Playgroud)
我返回并绑定到表的数据的结构如下:
[
{
"id": 1,
"date": "20.07.2019",
"price": 3.2,
"customer": {
"ownerid": 1,
"firstname": "John",
"lastname": "Johnson"
}
}
]
Run Code Online (Sandbox Code Playgroud)
这里我使用的是列数组:
import ReactTable from "react-table";
<ReactTable data={this.state.offers} columns={columns}
filterable={true} pageSize={10}/>
Run Code Online (Sandbox Code Playgroud)
绑定数据:
fetchOffers = () => {
const token = sessionStorage.getItem("jwt");
fetch(SERVER_URL + 'api/offers',
{
headers : {'Authorization':token}
})
.then((response) => response.json())
.then((responsteData) => {
this.setState({
offers: responsteData._embedded.offers,
});
console.log(this.state);
})
.catch(err=> console.error(err));
}
Run Code Online (Sandbox Code Playgroud)
绑定后我使用的数据:
检查访问器文档。它有几个复杂数据结构的示例。我在您的示例数据中没有看到_links或。href所以我认为你只需要:
accessor: 'customer.ownerid'
Run Code Online (Sandbox Code Playgroud)
控制台屏幕截图中的数据结构与您的示例数据不匹配。而且好像并没有包含ownerid。尝试accessor: '_links.customer.href'检查它是否向表输出任何内容。
| 归档时间: |
|
| 查看次数: |
14979 次 |
| 最近记录: |