Material React Table行排序后选中行顺序异常问题求助

你遇到的核心问题是：点击列标题排序时，MaterialReactTable会在内部处理排序逻辑，不会修改你传入的data数组，但你获取选中行的方式是通过rowSelection的键（原数组索引）去原data数组中取值，这就导致选中行的顺序是原数组的顺序，而非屏幕上显示的排序后顺序；而拖拽排序时你手动修改了data数组，索引和显示顺序一致，所以没有问题。

1. 利用表格实例获取排序后的选中行（推荐） #

MaterialReactTable提供了内置的方法来获取当前显示状态下的选中行，无需手动通过索引匹配：

修改步骤：

• 添加tableRef用于获取表格实例
• 重写getSelectedRows函数，通过表格实例的getSelectedRows()方法直接获取排序后的选中行
• 优化拖拽排序逻辑，使用组件内置的onRowOrderChange事件替代手动操作数组

完整修改后的代码 #

import React, { useState, useEffect, useRef, useMemo } from "react";
import MaterialReactTable from "material-react-table";

const Table = ({ tableData, onSelectedRowsChanged, columnInfo }) => {
  const [data, setData] = useState([]);
  const [rowSelection, setRowSelection] = useState({});
  // 添加表格实例引用
  const tableRef = useRef(null);

  useEffect(() => {
    setData(tableData);
  }, [tableData]);

  useEffect(() => {
    getSelectedRows();
  }, [rowSelection]);

  const columns = useMemo(() => columnInfo, [columnInfo]);

  // 重写获取选中行的逻辑
  function getSelectedRows() {
    if (!tableRef.current) return;
    // 获取当前显示顺序下的选中行，自动保持屏幕显示顺序
    const selectedRows = tableRef.current.getSelectedRows().map(row => row.original);
    onSelectedRowsChanged(selectedRows);
  }

  return (
    <>
      <MaterialReactTable
        ref={tableRef} // 绑定表格引用
        autoResetPageIndex={false}
        columns={columns}
        data={data}
        enableRowSelection
        onRowSelectionChange={setRowSelection}
        state={{ rowSelection }}
        muiTableBodyRowProps={({ row }) => ({
          onClick: row.getToggleSelectedHandler(),
          sx: { cursor: "pointer" }
        })}
        enableRowNumbers
        rowNumberMode="static"
        initialState={{ density: "compact" }}
        enableTopToolbar={false}
        enableRowOrdering
        // 使用内置的行顺序变化事件替代手动拖拽处理
        onRowOrderChange={({ newData }) => setData(newData)}
      />
    </>
  );
};

export default Table;

2. 额外优化（可选） #

如果你的表格数据有唯一标识字段（如id），建议添加getRowId属性，让rowSelection基于唯一id而非数组索引，避免因数组顺序变化导致的选中状态异常：

<MaterialReactTable
  // ...其他属性
  getRowId={row => row.id} // 替换为你的数据唯一标识字段
/>

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