react-table:无法在react-table中插入嵌套json数据

Question

这是完整的代码

​

我有一台react-table。版本6.1.1。我已经在上面的codeSandbox中添加了完整的代码，还在下面添加了相关的代码片段。

我可以为[0] index插值数据，但我无法对所有条目进行插值，这就是问题所在。

就像我为[0] index所做的那样，我希望做一些类似的事情。但是，不确定具体如何实现这一点。

自定义单元格的代码

MyCell({
    value,
    columnProps: {
      rest: { someFunc }
    }
  }) {
    const data = {
      // labels: value.map((val, idx) => {
      //   return idx;
      // }),
      datasets: [
        {
          backgroundColor: [
            "#ff8779",
            "#2a84e9",
            "#e2e2e2",
            "#ff8779",
            "#2a84e9",
            "#e2e2e2"
          ],
          data: value
        }
      ]
    };

    return <Pie data={data} />;
  }

列的代码

  columns = [
    // * embedding checkbox
    {
      Header: "Select",
      Cell: row => (
        <input
          type="checkbox"
          defaultChecked={this.state.checked[row.index]}
          checked={this.state.checked[row.index]}
        />
      )
    },
    {
      Header: "System",
      accessor: "sites[0].systems[0].systemName"
    },
    {
      Header: "Measurement",
      accessor: "sites[0].systems[0].measurements[0].name"
    },
    {
      Header: "Min",
      accessor: "sites[0].systems[0].measurements[0].min"
    },
    {
      Header: "Max",
      accessor: "sites[0].systems[0].measurements[0].max"
    },
    {
      Header: "Avg",
      accessor: "sites[0].systems[0].measurements[0].average"
    },
    {
      Header: "Last",
      accessor: "sites[0].systems[0].measurements[0].last"
    },
    {
      Header: "Bar",
      accessor: "sites[0].systems[0].measurements[0].buckets.values",
      Cell: this.MyCell
    }
  ]; 

render()中的react-table component代码

            <ReactTable
                  className="-striped -highlight"
                  ref={r => (this.reactTable = r)}
                  data={[...measurementsData]}
                  pageSize={
                    measurementsData.length > 10 ? 10 : measurementsData.length
                  }
                  filterable
                  resizable={true}
                  columns={this.columns}
                  showPaginationTop={false}
                  showPaginationBottom={false}
                />

Answer 1

您需要编写一个自定义的Cell函数

对不起，我不知道如何“幻想”-flatten数组，所以我在回答您之前的问题时使用了相同的方法

  renderJson(sites, property) {
    let flat = sites.map(md => md.systems);
    flat = [].concat(...flat);
    flat = flat.map(md => md.measurements);
    flat = [].concat(...flat);

    return (
      <div>
        {flat.map(measurement => {
          return (
            <>
              {measurement[property]}
              <br />
            </>
          );
        })}
      </div>
    );
  }

然后

      Cell: row => {
        return this.renderJson(row.original.sites, 'name')
      }
.
.
.
      Cell: row => {
        return this.renderJson(row.original.sites, 'min')
      }
.
.
.
      Cell: row => {
        return this.renderJson(row.original.sites, 'max')
      }

这里是在action https://codesandbox.io/s/stoic-mclaren-kvmpg中查看它的链接