react-table行选择如何使用自定义主键作为key而非行索引

方案1：配置全局行ID（推荐） #

react-table 初始化时支持通过getRowId配置项自定义每行的唯一标识，行选择逻辑会默认复用该标识作为选中对象的key，无需额外适配：

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

const Table = () => {
  const columns = [/* 你的列配置 */]
  const data = [/* 你的业务数据数组，每条包含业务主键字段 */]

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    selectedRowIds, // 此处拿到的选中对象key直接为业务主键
  } = useTable(
    {
      columns,
      data,
      // 核心配置：返回业务主键作为行唯一ID
      getRowId: (originalRow) => originalRow.yourPrimaryKeyField, // 替换成你实际的业务主键字段名，比如id、recordId等
    },
    useRowSelection
  )

  // 后续逻辑直接使用selectedRowIds即可，格式符合需求
  return <>{/* 表格渲染逻辑 */}</>
}

方案2：手动转换选中对象（无需修改全局配置） #

如果现有逻辑依赖默认的索引行ID，不想修改全局配置，可以自行对返回的选中对象做映射转换：

// selectedRowIds 为react-table默认返回的索引为key的选中对象
// data 为你传入表格的原始业务数据数组
const businessKeySelected = Object.keys(selectedRowIds).reduce((result, rowIndex) => {
  const businessKey = data[Number(rowIndex)].yourPrimaryKeyField
  result[businessKey] = true
  return result
}, {})

注意事项 #

• 需确保自定义的业务主键全局唯一，否则会出现选择状态错乱的问题
• 该配置同时适配react-table v7、v8版本，v8版本使用逻辑一致

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