Javascript 无法实现React表服务器数据加载

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

所以我找到了服务器端的数据，也许可以帮助我。 我按照文档中的说明进行了操作，但typescript对我在更新状态时试图使用的数据表示不满

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

从web api获取数据的方法：

private fetchSales（）{
取回(`http://localhost:50335/api/RK`)
.then（response=>response.json（））
。然后（数据=>
这是我的国家({
销售：数据//这里有500000件商品
})
)
}

编辑

我注意到一些错误

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}
/>

至于Typescript，从我收集的信息来看，Typescript没有足够的信息来推断您的承诺返回的类型

因此，必须显式注释泛型类型参数：

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

返回新承诺（（解析，拒绝）=>{…}

编辑

我注意到一些错误

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}
/>

至于Typescript，从我收集的信息来看，Typescript没有足够的信息来推断您的承诺返回的类型

因此，必须显式注释泛型类型参数：

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

返回新承诺（（解析，拒绝）=>{…}

谢谢您的帮助！我将测试itI。我做了一个测试，它的工作与您建议的更改几乎完美。唯一不起作用的是，当应用程序启动时，列表为空，这就是为什么我调用componentDidMount上的_fetchData函数。现在我需要在react表中按顺序触发一个事件调用_fetchData并填充列表。你知道在应用程序加载时填充表的方法吗？谢谢你的帮助！我将测试它。我做了一个测试，它的工作与你建议的更改几乎完美。唯一不起作用的是，当应用程序启动时，列表为空，这就是我调用_fetc的原因componentDidMount上的hData函数。现在我需要在react表中触发一个事件，以便调用_fetchData并填充列表。您知道在应用程序加载时填充表的方法吗？