MaterialReactTable的rowSelection格式ID解析问题求助

我在项目中使用MaterialReactTable，按照官方行选择配置完成了设置，表格运行正常，选中行后能返回正确的ID，但rowSelection的格式是{63d19bebc764a5587a48683a: true}，没法直接解析出ID。试过官方推荐的useRef和@tanstack/react-table方法都没用，想保留当前配置，求解析ID的方法。

我的MaterialReactTable配置代码：

return (
  <MaterialReactTable
    columns={columns}
    data={data}
    enableRowSelection
    onRowSelectionChange={setRowSelection}
    enableMultiRowSelection={false}
    //getRowId={(row) => row?._id }
    getRowId={(originalRow) => originalRow._id}
    initialState={{ 
      showColumnFilters: true,
      columnVisibility: { _id: false } 
    }} //hide columns listed to start
    manualFiltering
    manualPagination
    manualSorting
    muiToolbarAlertBannerProps={
      isError
        ? {
            color: 'error',
            children: 'Error loading data',
          }
        : undefined
    }
    muiTableBodyRowProps={({ row }) => ({
      //add onClick to row to select upon clicking anywhere in the row
      onClick: row.getToggleSelectedHandler(), 
      sx: { cursor: 'pointer' },
    })}
    onColumnFiltersChange={setColumnFilters}
    onGlobalFilterChange={setGlobalFilter}
    onPaginationChange={setPagination}
    onSortingChange={setSorting}
    rowCount={rowCount}
    state={{
      columnFilters,
      globalFilter,
      isLoading,
      pagination,
      showAlertBanner: isError,
      showProgressBars: isRefetching,
      sorting,
      rowSelection
    }}
  />
);

解决方案 #

1. 直接提取单选ID #

因为你设置了enableMultiRowSelection={false}，rowSelection对象只会包含一个选中行的键值对，用Object.keys()即可直接获取ID：

//获取选中ID，为空时返回null
const selectedRowId = Object.keys(rowSelection).length > 0 ? Object.keys(rowSelection)[0] : null;

2. 在状态更新时直接处理 #

可以在onRowSelectionChange回调里直接解析ID并存储，无需保留完整的rowSelection对象：

//替换原有的rowSelection状态，直接存选中ID
const [selectedRowId, setSelectedRowId] = useState(null);

const handleRowSelectionChange = (newSelection) => {
  const id = Object.keys(newSelection)[0];
  setSelectedRowId(id || null);
};

//组件配置中更新相关属性
<MaterialReactTable
  //...其他配置
  onRowSelectionChange={handleRowSelectionChange}
  state={{
    //...其他状态
    //同步表格选中状态
    rowSelection: selectedRowId ? { [selectedRowId]: true } : {}
  }}
/>

3. 扩展支持多选（可选） #

如果之后需要开启多选，用Object.keys()配合过滤即可获取所有选中ID：

//获取所有选中的ID数组
const selectedRowIds = Object.keys(rowSelection).filter(id => rowSelection[id]);

内容的提问来源于stack exchange，提问作者j-terranova