无法实现 React-table 服务器数据加载

Question

我正在测试 React-table 服务器端数据，以呈现从 Web api 获取的大量数据，而不会导致浏览器崩溃。使用基本的反应表设置，浏览器无法处理如此多的记录（500000）并崩溃（它卡在请求的挂起状态）。

所以我找到了可能对我有帮助的服务器端数据。 我按照文档中的说明进行操作，但打字稿抱怨我在更新状态时尝试使用的数据。

这是我到目前为止所拥有的：

从web api获取数据的方法：

private fetchSales() {
  fetch(`http://localhost:50335/api/RK`)
    .then(response => response.json())
    .then(data =>
      this.setState({
        sales: data // here I get 500000 items 
      })
    )
}

这个 fetchSales 在 componentDidMount() 中被调用。

然后我在 render() 中有 ReactTable 组件：

render() {
  const {
    sales,
    pages
  } = this.state;
  return ( 
    <div className = "App" >
    <ReactTable 
      data = {sales}
      manual 
      pages = {pages}
      defaultPageSize = {10}
      onFetchData = {this._fetchData}
      columns = {
      [{
          Header: "Region",
          accessor: "Region"
        },
        {
          Header: "Country",
          accessor: "Country"
        }]
      }
    />
    </div>
  );
}

在 ReactTable 中调用了一个名为 _fetchData 的函数，该函数如下所示：

private _fetchData(state: any) {
  requestData(
    state.sales,
    state.pageSize,
    state.page
  ).
  then(res => {
    this.setState({
      sales: res.rows, // here typescript complain: "res is of type 'unknown'"
      pages: res.pages // here typescript complain: "res is of type 'unknown'"
    });
  })
}

在 setState 中 res 对象的类型是“未知”，而 typescript 不喜欢它。

requestData 是一个存在于类之外并获取销售额、pageSize 和页面状态的函数：

const requestData = (sales: any, page: number, pageSize: number) => {
  return new Promise((resolve, reject) => {
    const res = {
      rows: sales.slice(pageSize * page, pageSize * page * pageSize),
      pages: Math.ceil(sales.length / pageSize)
    }

    resolve(res);
  })
}

该功能与文档中的功能几乎相同，我只删除了过滤和排序，因为我不需要它们。我只需要返回函数的 res 对象。

我几乎忘记了，在构造函数中，我将 this 附加到 _fetchData 方法：this._fetchData = this._fetchData.bind(this);

为什么打字稿抱怨我试图用来设置状态的 res 对象？

最好的问候！ 美国

Answer 1

编辑

我注意到了一些错误。

private _fetchData(state: any) {
  requestData(
    state.sales, // that should be state.data (state is the state of ReactTable)
    state.pageSize,
    state.page
...

接下来，我注意到您在获取数据后进行了分页。但是使用manual 和onFetchData 是为了处理服务器 上的分页。例如，使用page 和pageSize，您可以将这些参数传递给您的API。这就是分页的全部意义所在！

文档中的一个示例：

onFetchData={(state, instance) => { //onFetchData is called on load and also when you click on 'next', when you change page, etc.
    // show the loading overlay
    this.setState({loading: true})
    // fetch your data
    Axios.post('mysite.com/data', {
      //These are all properties provided by ReactTable
      page: state.page,
      pageSize: state.pageSize,
      sorted: state.sorted,
      filtered: state.filtered
    })

既然您一次获取所有这些信息（为什么？服务器上的 API 不能处理分页吗？这样，您不必等待很长时间才能返回结果），那么我建议您让 ReactTable 完成这项工作。

也就是说，你只需这样做：

<ReactTable
  columns={columns}
  data={data}
/>

ReactTable 将负责分页。现在，您可以在ComponentDidMount 中使用您对 API 的查询。

---

能否请您尝试将所有逻辑放在 onFetchData 中。我可能是错的，但在我看来，您误解了文档中的说明。 OnFetchData 在 ComponentDidMount 被调用，它并不是告诉你必须把你的函数放在那里。

private _fetchData(state, instance) {

  const { page, pageSize } = state

  fetch(`http://localhost:50335/api/RK`)
    .then(response => response.json())
    .then(data =>
         let sales = data
         this.setState({
           sales: sales.slice(pageSize * page, pageSize * page * pageSize),
           pages: Math.ceil(sales.length / pageSize)
         });
    )
}

至于 Typescript，据我所知，Typescript 没有足够的信息来推断您的 Promise 返回的类型。

所以你必须显式注释 Promises 泛型类型参数：

return new Promise<{ sales: object; pages: number; }>((resolve, reject) => { ... }