代码沙盒示例: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
最佳答案
您正在迭代 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实现此更改。您迭代“行”元素的所有地方都已更改为迭代“页面”,并且它按预期工作。
关于javascript - react 表usePagination不应用分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62115344/