javascript - react 表usePagination不应用分页

Question

代码沙盒示例:https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

我正在使用 react-table 包(版本 7.1.0)。

我有一张显示一些发票的表格。

我在初始加载时检索所有数据。然后我想对这些数据应用客户端分页，以便在任何时候只显示部分结果。

我的数据中有 139 项。

用户最初会看到 10 个结果并能够“显示更多”。目前这是在一个选择字段中实现的，它更新 pageSize

(在我的示例中，我使用的假数据不是来自任何端点。)

我使用 usePagination 钩子(Hook)的方式与此官方示例中相同:https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination?file=/src/App.js

useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0, pageSize: 10 }
    },
    useSortBy,
    usePagination
  );

但是我必须缺少一些东西，因为尽管明确设置了 pageIndex 和 pageSize，但没有应用分页。

  "pageIndex": 0,
  "pageSize": 10,

一次显示所有结果，而不是仅显示 10 个。

这里没有应用分页的原因是什么？

代码沙盒示例:https://codesandbox.io/s/react-table-pagination-not-working-xt4yw

Answer 1

您正在迭代 table.jsx 中的 rows，这与您的预期结果相反。 rows 是数据保存的所有行的列表，如 in the API docs 所述:

An array of materialized row objects from the original data array and columns passed into the table options

您应该使用的是 page，如 usePagination docs 中所述:

An array of rows for the current page, determined by the current pageIndex value.

Here is a fork of your codesandbox实现此更改。您迭代“行”元素的所有地方都已更改为迭代“页面”，并且它按预期工作。