ReactTable点击删除行后组件state重置为初始值问题如何解决？

根因 #

核心是闭包陷阱和ReactTable依赖配置未缓存共同导致：你定义的columns配置未做缓存，每次组件重渲染时columns会重新生成，内部绑定的删除回调捕获了初始渲染时的state快照（初始为空数组），触发删除时用旧state执行更新，最终导致state被覆盖回初始空值。外部按钮调用删除逻辑正常是因为外部按钮绑定的是最新的回调引用，不存在闭包捕获旧值的问题。

修复步骤 #

• 1. 删除逻辑使用函数式更新state，避免直接引用当前state值产生闭包问题：

// 原来的写法（错误）
const handleDelete = (rowId) => {
  setTableData(tableData.filter(item => item.id !== rowId))
}
// 修改为函数式更新（正确）
const handleDelete = (rowId) => {
  setTableData(prev => prev.filter(item => item.id !== rowId))
}

• 2. 用useCallback包裹删除方法，稳定回调引用：

import { useCallback } from 'react'

const handleDelete = useCallback((rowId) => {
  setTableData(prev => prev.filter(item => item.id !== rowId))
}, [])

• 3. 用useMemo缓存columns配置，依赖项加入包裹后的删除方法：

import { useMemo } from 'react'

const columns = useMemo(() => [
  // 其他列配置保持不变
  {
    Header: '操作',
    Cell: ({ row }) => <button onClick={() => handleDelete(row.id)}>删除</button>
  }
], [handleDelete])

• 4. 用useMemo缓存传递给ReactTable的data数据：

const memoizedData = useMemo(() => tableData, [tableData])
// 后续将memoizedData传入useTable的data参数即可

内容的提问来源于stack exchange，提问作者Guillaume D