React Table usePagination 不应用分页

Question

Codesandbox 示例：https ://codesandbox.io/s/react-table-pagination-not-working-xt4yw

我正在使用 react-table 包（版本 7.1.0）。

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

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

我的数据中有 139 个项目。

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

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

我usePagination以与此官方示例相同的方式使用钩子：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 个。

此处未应用分页的原因是什么？

Codesandbox 示例：https ://codesandbox.io/s/react-table-pagination-not-working-xt4yw

Answer 1

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

来自原始数据数组和传递到表选项的列的物化行对象数组

您应该使用的是page，如usePagination 文档中所述：

当前页的行数组，由当前pageIndex值确定。

这是实施此更改的代码和框的分支。您遍历“行”元素的所有地方都已更改为遍历“页面”，并且它按预期工作。