React中使用mui-datatables无法获取选中行数据的问题

你可以通过原始数据源匹配索引的方式获取选中行的完整数据，具体实现如下：

1. 保留表格的原始数据变量（即传给MUIDataTable组件data属性的数组）
2. 在onRowsDelete回调中，用返回的索引数组从原始数据里提取对应行数据

示例代码：

import { MUIDataTableOptions } from "mui-datatables";

// 表格原始数据（如果是接口获取的，用React状态变量存储即可）
const tableData = [
  { id: 1, name: "张三", age: 25 },
  { id: 2, name: "李四", age: 30 },
  // 更多数据...
];

const options: MUIDataTableOptions = {
  onRowsDelete: (rows) => {
    // rows.data是选中行的索引集合，例如[0, 2]
    const deletedRowsData = rows.data.map(index => tableData[index]);
    console.log("待删除的行数据：", deletedRowsData);
    
    // 这里调用后端删除接口，传入deletedRowsData即可
    // 示例：
    // fetch("/api/delete-rows", {
    //   method: "POST",
    //   headers: { "Content-Type": "application/json" },
    //   body: JSON.stringify(deletedRowsData)
    // });
  },
  // 其他配置项...
};

补充说明 #

mui-datatables的onRowsDelete回调默认仅返回选中行的索引，因此必须依赖原始数据源映射获取完整行数据。如果数据是动态更新的（比如从后端实时拉取），只要确保tableData是最新的状态变量（比如用useState存储），就能正确匹配到对应行。

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