Material React Table手动分页异常:首次切换页面状态回退
问题分析
首次点击分页栏第2页时,pagination.pageIndex先更新为1随即回退为0,核心原因是Material React Table的分页状态被重复控制:
- 代码中同时在
useMaterialReactTable的顶层配置传入了pagination(外部状态),又在state属性中设置了pagination(内部状态),两者冲突导致首次状态更新被回滚。 - 后续操作正常是因为状态冲突的触发条件仅在首次初始化后第一次变更时出现。
解决方案
移除useMaterialReactTable配置中state属性内的pagination字段,仅通过顶层的pagination和onPaginationChange来控制分页状态(符合手动分页的设计逻辑)。
修改后的关键代码片段:
const table = useMaterialReactTable({ columns: tableColumns, data: fetchedUsers, pageCount: Math.ceil(userCount / pagination.pageSize), onPaginationChange: handlePaginationChange, pagination, muiPaginationProps: { color: "primary", shape: "rounded", showRowsPerPage: false, variant: "outlined", }, // 其他原有配置保持保持不变 state: { // 移除此处的pagination配置 isLoading: isFetchingUsers, isSaving: isCreatingUser || isUpdatingUser || isDeletingUser, showAlertBanner: isLoadingUsersError, showProgressBars: isFetchingUsers, }, });
额外注意事项
pageCount的计算依赖pagination.pageSize,当每页条数变化时会自动重新计算,无需额外处理。useQuery的queryKey已包含pagination.pageIndex和pageSize,分页变更时会自动触发数据重新请求,逻辑无需调整。- 代码中
isCreatingUser、isUpdatingUser、isDeletingUser变量未定义,需补充相关状态逻辑(不影响分页修复,但会导致isSaving状态异常)。
内容的提问来源于stack exchange,提问作者Abhay Thayyil Mukundan
相关产品推荐
相关产品推荐

