react-table：无法在 react-table 内插入嵌套的 json 数据

Question

这是完整的代码

我有一个react-table。版本6.1.1。我在上面的codeSandbox中添加了完整的代码，并在下面添加了相关的代码sn-ps。

我可以为[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
    }
  ]; 

react-table component 内 render() 的代码

            <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函数

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

  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')
      }
 

这是查看实际操作的链接 https://codesandbox.io/s/stoic-mclaren-kvmpg