React-table全局筛选后编辑单元格触发页面跳转BUG问询

问题描述 #

实现了带全局搜索、分页和可编辑单元格的表格组件，使用全局筛选搜索内容后，编辑单元格并点击其他区域失焦时，表格会瞬间跳回第一页，该问题仅在搜索后进行编辑操作时出现。

问题原因 #

1. 编辑单元格时，skipPageReset会被临时设为true，防止数据更新时自动重置分页；100ms后skipPageReset会恢复为false。
2. EditableTable组件中，用于同步搜索值到全局过滤器的useEffect错误地将skipPageReset列为依赖项，导致skipPageReset变化时会重新调用setGlobalFilter。
3. 此时autoResetPage配置为!skipPageReset（即true），react-table在设置全局过滤器时会自动将页码重置为第一页，从而出现跳页问题。

修复方案 #

1. 移除全局过滤器Effect的不必要依赖 #

修改EditableTable.tsx中的useEffect，去掉skipPageReset依赖，确保仅在搜索值变化时更新全局过滤器：

useEffect(() => {
  setGlobalFilter(searchValue || undefined)
}, [searchValue, setGlobalFilter]) // 移除skipPageReset依赖

2. 清理App组件Effect的无效依赖 #

App.tsx中的useEffect依赖了不会变化的originalData，移除该依赖避免不必要的Effect触发：

React.useEffect(() => {
  console.log('data updated')
  const timeout = setTimeout(() => {
    setSkipPageReset(false)
  }, 100)

  return () => clearTimeout(timeout)
}, [data]) // 移除originalData依赖

修复效果 #

修改后，编辑单元格时skipPageReset的变化不会再触发全局过滤器的重复设置，react-table也就不会自动重置分页，解决了搜索后编辑跳回第一页的问题。

内容的提问来源于stack exchange，提问作者Adil Mughal