Реактивная таблица загружает все данные за один раз вместо разбиения на страницы на стороне сервера

Question

Я использую версию реагирующей таблицы 6.9.2 для подключения к API и отображения данных.Я следую основам этого примера:

https://github.com/tannerlinsley/react-table/tree/v6#server-side-data

Проблема, с которой я сталкиваюсь в настоящее время, заключается в том, что API загружает все данные при загрузке приложения, что не является идеальным.Я пытаюсь включить разбиение на страницы на стороне сервера, чтобы он загружал 10 строк на страницу, но, похоже, он не работает, поскольку все 100 строк загружаются при запуске приложения.

Текущий код:

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

Опция defaultPageSize={10} не применяется.Когда я удаляю свойство manual, оно работает, но при переходе по каждой странице каждый раз запрашивает все 100 строк.Пример, который отображает функциональность, которую я ищу, находится в этой песочнице: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/archives/v6-examples/react-table-server-side-data

Моя текущая песочница здесь: https://codesandbox.io/s/v0vr0jqmwy

Я застрял на этом целую вечность, и этосводит меня с ума!

Answer 1

Я обнаружил две проблемы.

1. Во вкладке сети инструмента разработчика вы можете видеть, что параметры получения не заполнены.Вы можете исправить это, изменив вызов axios, добавив свойство params.

     axios
       .get("https://jsonplaceholder.typicode.com/posts",{ params: {
         page: state.page,
         pageSize: state.pageSize,
         sorted: state.sorted,
         filtered: state.filterd
       }})
   

2. Даже если вы предоставите параметры получения, ваш api на jsonplaceholder.typicode.com/posts, по-видимому, не учитываетсяучтите эти параметры.