React表SubComponent返回另一个表

Question

我有下面的React Table，我在主表中有数据，如果你点击任何箭头，我会在该行下面显示另一个表。问题在于您单击了哪一行，我需要发出一个API请求，获取数据，然后显示。问题是this.getDetail内部的返回不会在SubComponent上进行可视更改。console.log(result)会打印出从API中获取的正确数组。我已经在async-await中设置了this.getDetail，并且我正在使用获取数据的承诺。我如何修复它，以便显示我获取的数据？下面的子组件仅返回1

<ReactTable
  data={dataArray}
  columns={columns}
  defaultPageSize={5}
  noDataText="No Data"
  SubComponent={row => {
    this.getDetail(
      row.original.cusip,
      row.original.description,
      detailColumns
    ).then(function(result) {
      console.log(result);
      return (
        <ReactTable
          defaultPageSize={5}
          noDataText="No Data"
          columns={detailColumns}
          // data={Array.from(myDetail)}
          //resolveData={data => console.log(data)}
          //style={{ height: "400px" }}
          //showPagination={false}
        />
      );
    });
    return 1;
  }}
/>

Answer 1

您需要将数据放入状态。一旦你的API请求响应，将response设置为state。

因此，您的ReactTable代码将如下所示

<ReactTable
  data={this.state.dataArray}
  ...
  .../>

因此，当通过this.setState({ dataArray: apiResonse });更新状态时，您的ReactTable将呈现。