React-Table 未在启用服务器端选项的情况下加载 API 数据

Question

我正在使用 react-table 版本 6.9.2 连接到 API 并显示数据。我的初始实施工作正常：

componentDidMount() {
    axios
        .get('http://jsonplaceholder.typicode.com/posts', {
            responseType: 'json'
        })
        .then((response) => {
            this.setState({ posts: response.data });
        });
}
return (
        <ReactTable
            columns={columns}
            data={this.state.posts}
            filterable
            defaultPageSize={5}
            noDataText={'Loading...'}
        />
    );

但是我想扩展我的应用程序并连接到数据库并启用服务器端分页。我按照提供的示例进行操作： https://github.com/tannerlinsley/react-table/tree/v6#server-side-data

然而，当我对我的 ReactTable 进行以下更改时，数据没有显示

<ReactTable
        columns={columns}
        data={this.state.posts}
        pages={this.state.pages}
        loading={this.state.loading}
        filterable
        defaultPageSize={5}
        noDataText={"Loading..."}
        manual // informs React Table that you'll be handling sorting and pagination server-side
        onFetchData={(state, instance) => {
          // show the loading overlay
          this.setState({ loading: true });
          // fetch your data
          axios
            .post("http://jsonplaceholder.typicode.com/posts", {
              page: state.page,
              pageSize: state.pageSize,
              sorted: state.sorted,
              filtered: state.filtered
            })
            .then(res => {
              // Update react-table
              this.setState({
                posts: res.data,
                data: res.data.posts,
                pages: res.data.pages,
                loading: false
              });
            });
        }}
      />

我认为我搞砸了 onFetchData 函数，但我不完全确定是什么。有没有更好的方法来启用它？任何帮助将不胜感激！

我这里有一个可用的代码沙箱：https://codesandbox.io/s/yp88v0kx2z

Answer 1

请在 urls、callback 和 axios 中做一些更正

https://codesandbox.io/s/lrn7j5vjrl?fontsize=14

React-Table 未在启用服务器端选项的情况下加载 API 数据

React-Table not loading API data with server-side options enabled

reactjs

axios

server-side

react-table