如何在React Table中预先选中行？无需修改数据的初始化方案咨询

问题根因 #

React Table 的 initialState 仅在组件首次初始化时生效，你是异步从服务端获取预选中的行ID，此时表格实例已经创建完成，后续修改 initialState 不会触发表格状态更新，这是配置不生效的核心原因。

推荐解决方案 #

方案1：受控模式管理选中状态（最优） #

将行选中状态从React Table内部转移到外部组件自行控制，适配异步加载预选中数据的场景：

• 声明本地state存储选中行标识：

const [selectedRowIds, setSelectedRowIds] = useState({})

• 在 useReactTable 配置中绑定状态和变更回调：

const table = useReactTable({
  // 其他原有配置：columns、data等
  state: {
    rowSelection: selectedRowIds,
  },
  onRowSelectionChange: setSelectedRowIds,
})

• 异步获取到预选中列表后，直接生成符合格式的选中对象更新state即可：

useEffect(() => {
  // 假设preSelectedList是接口返回的需要预选中的行数据
  if (preSelectedList.length) {
    const newSelected = preSelectedList.reduce((acc, cur) => {
      acc[cur.id] = true
      return acc
    }, {})
    setSelectedRowIds(newSelected)
  }
}, [preSelectedList])

方案2：调用实例方法重置选中状态 #

如果不想用受控模式，可以直接调用表格实例提供的重置方法更新选中状态：

const table = useReactTable(/* 原有基础配置 */)

useEffect(() => {
  if (preSelectedList.length) {
    const newSelected = preSelectedList.reduce((acc, cur) => {
      acc[cur.id] = true
      return acc
    }, {})
    // 传入自定义选中对象覆盖默认重置逻辑
    table.resetRowSelection(newSelected)
  }
}, [preSelectedList, table])

注意事项 #

如果你的行数据唯一标识字段不是默认的id，需要在表格配置中指定getRowId方法，避免行匹配失败：

const table = useReactTable({
  // 其他配置
  getRowId: (row) => row.your_custom_unique_id_field,
})

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