React Table 子组件 Return 另一个 Table

Question

我有下面的 React Table，我在主 table 中有数据，如果您单击任何箭头，我会在该行下显示另一个 table。问题是根据你点击哪一行，我需要做一个API请求，获取数据，然后显示。问题是 this.getDetail 中的 return 没有对 SubComponent 进行视觉更改。 console.log(result) 打印出从 API 获取的正确数组。我已经在 async-await 中设置了 this.getDetail 并且我正在处理获取数据的承诺。我该如何修复它以便显示我获取的数据？子组件下方只是 returns 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 请求响应，请在状态中设置响应。

所以你的 ReactTable 代码会像这样

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

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

React Table 子组件 Return 另一个 Table

React Table SubComponent Return Another Table

reactjs

asynchronous

async-await

react-table