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

请在网址，回调和axios中进行一些更正

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