TanStack Table 分页状态管理问题解析

问题背景

在使用 TanStack Table（原 React Table）进行表格开发时，开发者经常会遇到分页功能实现的问题。最近有开发者反馈，在 Vanilla JS 环境下使用 TanStack Table v8.12.0 时，调用 nextPage() 和 previousPage() 方法后，表格状态没有正确更新，导致始终显示第一页数据。

核心问题分析

这个问题本质上是一个状态管理配置错误。在 TanStack Table 中，表格的状态管理有两种配置方式：

1. 受控状态（Controlled State）：通过 state 属性完全控制表格状态
2. 初始状态（Initial State）：通过 initialState 属性设置初始状态，后续由表格内部管理

错误原因

开发者错误地使用了 state 属性来配置分页，代码如下：

state: {
  pagination: {
    pageIndex: 0,
    pageSize: 10,
  },
}

这种配置方式将表格状态完全锁定为初始值，即使调用分页方法，状态也无法更新，因为表格状态被外部完全控制且没有提供状态更新机制。

正确解决方案

应该改用 initialState 属性来配置初始分页状态：

initialState: {
  pagination: {
    pageIndex: 0,
    pageSize: 10,
  },
}

这样设置后，表格会在内部管理分页状态，调用 nextPage() 和 previousPage() 方法时，状态能够正常更新。

状态管理最佳实践

在 TanStack Table 中，状态管理有以下几种模式：

1. 完全受控模式：同时提供 state 和 onStateChange 回调
2. 半受控模式：只提供 initialState，由表格内部管理状态
3. 完全非受控模式：不提供任何状态配置，使用表格默认值

对于大多数简单场景，使用 initialState 的半受控模式是最简单有效的解决方案。

总结

TanStack Table 提供了灵活的状态管理机制，但需要正确理解和使用 state 与 initialState 的区别。当遇到分页状态不更新的问题时，首先应该检查是否错误地使用了 state 属性来锁定状态，而不是使用 initialState 来设置初始状态。

正确配置状态管理后，TanStack Table 的分页功能将能够正常工作，提供流畅的用户体验。