Я использую версию реагирующей таблицы 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