如何在React Material UI DataGrid中获取选中行的完整数据

问题说明 #

使用MUI DataGrid时，只能拿到选中行的ID，尝试访问firstName、lastName等字段时触发以下错误：

错误信息：类型'GridRowId'上不存在该属性。

这是因为你定义的selection是GridSelectionModel类型，它本质是行ID的数组，而非完整的行对象，所以直接通过data.id、data.firstName访问属性会报错。

解决方法 #

方法1：使用apiRef直接获取完整选中行（推荐） #

MUI DataGrid提供了apiRef对象，可以直接调用API获取选中的完整行数据，这是官方推荐的方式。

代码示例：

import { DataGrid, GridSelectionModel, useGridApiRef } from '@mui/x-data-grid';
import { useState } from 'react';

// 定义行数据类型
type Row = {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
};

export default function YourComponent() {
  const rows: Row[] = data; // 你的数据源
  const apiRef = useGridApiRef();
  const [selectedRows, setSelectedRows] = useState<Row[]>([]);

  const columns = [
    { field: "id", headerName: "ID", sortable: false, hide: true },
    { field: "firstName", headerName: "First Name" },
    { field: "lastName", headerName: "Last Name" },
    { field: "age", headerName: "Age" }
  ];

  return (
    <>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          checkboxSelection
          getRowId={(row) => row.id}
          apiRef={apiRef}
          onSelectionModelChange={() => {
            // getSelectedRows返回以ID为键的对象，转成数组
            const selected = Object.values(apiRef.current.getSelectedRows());
            setSelectedRows(selected as Row[]);
          }}
        />
      </div>

      {/* 渲染选中行的完整数据 */}
      <div>
        {selectedRows.map((row) => (
          <div key={row.id}>
            <p>姓名：{row.firstName} {row.lastName}</p>
            <p>年龄：{row.age}</p>
          </div>
        ))}
      </div>
    </>
  );
}

方法2：手动根据ID筛选行数据 #

如果不想引入apiRef，可以利用选中的ID数组，从原数据源中过滤出对应的完整行。

代码示例：

import { DataGrid, GridSelectionModel } from '@mui/x-data-grid';
import { useState } from 'react';

// 定义行数据类型
type Row = {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
};

export default function YourComponent() {
  const rows: Row[] = data; // 你的数据源
  const [selection, setSelection] = useState<GridSelectionModel>([]);

  // 根据选中的ID筛选完整行数据
  const selectedRows = rows.filter(row => selection.includes(row.id));

  const columns = [
    { field: "id", headerName: "ID", sortable: false, hide: true },
    { field: "firstName", headerName: "First Name" },
    { field: "lastName", headerName: "Last Name" },
    { field: "age", headerName: "Age" }
  ];

  return (
    <>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          rows={rows}
          columns={columns}
          checkboxSelection
          getRowId={(row) => row.id}
          onSelectionModelChange={(newSelection) => {
            setSelection(newSelection);
          }}
        />
      </div>

      {/* 渲染选中行的完整数据 */}
      <div>
        {selectedRows.map((row) => (
          <div key={row.id}>
            <p>姓名：{row.firstName} {row.lastName}</p>
            <p>年龄：{row.age}</p>
          </div>
        ))}
      </div>
    </>
  );
}

方法对比 #

• apiRef方法：效率更高，适合大数据量场景，无需手动遍历整个数据源；
• 手动筛选方法：逻辑简单，不需要额外引入API对象，适合小数据量场景。

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