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

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

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

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

1 个答案: