在 React Table 中访问过滤后的数据时出错

Question

我正在尝试使用上面的代码，但在构建过程中出现错误，提示 this.selectTable 为空。

有人可以帮我解决这个问题吗？我遵循了这个逻辑 -

  <ReactTableComponent
    ref={this.reactTable}
    className="polls-table"
    defaultPageSize={10}
    getTrProps={(_, rowInfo = {}) => {
      let { index = 0 } = rowInfo;
      return {
        style: {
          background: index % 2 ? "#fafafa" : "#FFFFFF"
        }
      };
    }}
    columns={columns}
    data={polls}
  />
  <Button
    color="primary"
    type="button"
    onClick={download(this.reactTable.current.getResolvedState())}
  >
    Download
    {/* <CSVLink data={myFunction(this.selectTable.getResolvedState())} filename="polls.csv">Export to CSV</CSVLink> */}
  </Button>
</Paper>;

Answer 1

这一行有问题：

onClick={download(this.reactTable.current.getResolvedState())}

现在发生的事情是 JS 运行立即使用您的代码来计算 onClick 处理程序。仅仅因为第一个运行上的 ref 为 null，就会发生错误。你应该拥有的是：

onClick={() => {download(this.reactTable.current.getResolvedState())}}

您还可以添加条件来检查 this.reactTable.current 是否不是 null

在 React Table 中访问过滤后的数据时出错

Error accessing filtered data in React Table

javascript

reactjs

react-table