Question

我在下面的React Table中有主表中的数据，如果单击任何箭头，我将在该行下显示另一个表。问题是基于您单击的那一行，我需要发出一个API请求，获取数据，然后显示。问题是在this.getDetail内部返回并没有对SubComponent进行视觉更改。 console.log(result)会打印出从API提取的正确数组。我已经在异步等待中设置了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请求响应，就将响应设置为状态。

所以您的ReactTable代码将是这样

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

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

反应表子组件返回另一个表

1 个答案: