来自 Material UI 数据网格的 getRowId 不起作用答案

【问题标题】：getRowId from Material UI datagrid doesn't work来自 Material UI 数据网格的 getRowId 不起作用
【发布时间】：2022-06-28 01:22:34
【问题描述】：

我不断收到此错误 未捕获的错误：MUI：数据网格组件要求所有行都具有唯一的 id 属性。即使我已将 getRowId 属性传递到数据网格并定义了什么Id 应该是。我正在从 Firestore 获取这些数据。我可能做错了什么？下面是组件代码：

import React, { useEffect, useState } from "react";

import { collection, getDocs } from "firebase/firestore";
import { db } from "../../firebase/firebase";

import { DataGrid } from "@mui/x-data-grid";

const columns = [
  { field: "name", headerName: "Name", width: 160 },
  { field: "email", headerName: "Email", width: 210 },
  { field: "roles", headerName: "Roles", width: 160 },
  { field: "isSuspended", headerName: "Suspended", width: 130 },
  { field: "lastUpdated", headerName: "Last Updated", width: 150 },
  { field: "updatedByEmail", headerName: "Updated By", width: 150 },
];

export default function Admins() {
  const [rows, setRows] = useState([]);

  useEffect(() => {
    const getAdmins = async () => {
      const admins = await getDocs(collection(db, "admins"));
      admins.forEach((admin) => {
        setRows((row) => [
          ...row,
          {
            id: admin.data().email,
            name: admin.data().name,
            email: admin.data().email,
            roles: admin.data().roles,
            isSuspended: admin.data().isSuspended,
            lastUpdated: admin.data().lastUpdated,
            updatedByEmail: admin.data().updatedByEmail,
          },
        ]);
      });
    };

    getAdmins();
  }, []);

  console.log("rows", rows);

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowId={(row) => row.email}
        pageSize={10}
        rowsPerPageOptions={[10]}
        checkboxSelection
      />
    </div>
  );
}

【问题讨论】：

标签： reactjs material-ui datagrid

【解决方案1】：

一个建议是首先检查您是否获得了 row.email 的值，以防万一返回未定义，然后尝试使用可选链接 getRowId={(row) => row?.email}

【讨论】：

我做了可选链接，但效果不佳。