如何正确访问MUI DataGrid选中行的单元格内容？

问题出在你使用的filter方法上：它返回的是符合条件的行数据数组（哪怕只选中一行，结果也是长度为1的数组），而不是单个行对象，所以直接访问selectedRowData.email会得到undefined。

下面是几种正确的处理方式：

1. 单选场景（只选一行） #

用find替代filter，find会返回第一个匹配条件的行对象：

<DataGrid
  checkboxSelection
  rows={adminData}
  columns={columns}
  getRowId={(row) => row._id}
  slots={{ toolbar: CustomToolbar }}
  onRowSelectionModelChange={(id) => {
    const selectedIDs = new Set(id);
    // 用find获取单个行对象
    const selectedRowData = adminData.find((row) =>
      selectedIDs.has(row._id)
    );

    console.log(selectedRowData); // 单个行对象
    console.log(selectedRowData?.email); // 可选链避免空值报错
  }} 
/>

如果明确是单选，也可以直接取选中ID数组的第一个元素来查找：

onRowSelectionModelChange={(selectedIds) => {
  if (selectedIds.length === 0) return;
  const selectedRowData = adminData.find(row => row._id === selectedIds[0]);
  console.log(selectedRowData?.email);
}}

2. 多选场景（可选多行） #

如果需要支持多选，遍历返回的数组访问每一行的属性：

onRowSelectionModelChange={(id) => {
  const selectedIDs = new Set(id);
  const selectedRowData = adminData.filter((row) =>
    selectedIDs.has(row._id)
  );

  // 遍历所有选中行，逐个访问email
  selectedRowData.forEach(row => {
    console.log(row.email);
  });

  // 或者取某一行的email，比如第一行
  console.log(selectedRowData[0]?.email);
}}

注意：使用?.可选链操作符可以避免没有选中行时，访问属性抛出Cannot read properties of undefined的错误。

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