访问 React 表中的嵌套 JSON

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)

绑定后我使用的数据:

在此输入图像描述

Uji*_*T34 9

检查访问器文档。它有几个复杂数据结构的示例。我在您的示例数据中没有看到_links或。href所以我认为你只需要:

accessor: 'customer.ownerid'
Run Code Online (Sandbox Code Playgroud)

控制台屏幕截图中的数据结构与您的示例数据不匹配。而且好像并没有包含ownerid。尝试accessor: '_links.customer.href'检查它是否向表输出任何内容。