如何更新管理react-table数据？useRowState插件行为不明确

useRowState 是 react-table 内置的行级状态管理插件，不需要你自己维护全量表格的 useState 就能完成行内交互状态的存储和更新，数据量较大时可以避免不必要的全量重渲染，比直接更新顶层数据源性能更好。

具体实现步骤如下：

• 引入插件后在 useTable 的入参中注册插件

import { useTable, useRowState } from 'react-table'

function YourTable() {
  // 你自己的columns和原始data定义
  const columns = [...]
  const data = [...]

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useRowState // 此处注册插件
  )

  // 渲染表格的逻辑和原有逻辑一致
}

• 定义交互列时直接调用行实例内置的状态读写方法
  以你提到的复选框列为例，行实例上自带state属性存储当前行的自定义状态，自带setRowState方法更新状态：

const columns = [
  // 其他列的定义保持不变
  {
    Header: '勾选',
    id: 'checkbox',
    Cell: ({ row }) => {
      // 读取当前行的勾选状态，默认值可自定义
      const isChecked = row.state?.isChecked || false
      return (
        <input
          type="checkbox"
          checked={isChecked}
          onChange={() => {
            // 更新当前行的状态，写法和useState的updater完全一致
            row.setRowState(prev => ({
              ...prev,
              isChecked: !prev.isChecked
            }))
            // 如果需要同步更新上层的原始数据源，在这里补充你的更新逻辑即可
          }}
        />
      )
    }
  }
]

你现在用useState存储全量数据源的方案也是可行的，更适合交互状态需要同步到上层、需要持久化存储的场景；useRowState更适合交互状态仅在表格内部使用的场景，性能开销更低。

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