React中如何将Firestore集合文档正确映射渲染到DataGrid表格

你在遍历Firebase返回的文档快照时，在循环内反复调用setRow更新状态，存在两个核心问题：

• useEffect的依赖数组为空，执行时闭包捕获的row始终是组件首次挂载时的初始空数组[]，每次执行setRow([...row, 当前项])时，展开的永远是空数组，之前更新的内容会被直接覆盖，循环结束后就只剩最后一条文档
• 循环内多次触发状态更新本身存在不必要的性能损耗

不要在循环中逐次更新状态，先把所有查询到的文档统一处理成符合表格要求的行数据数组，再单次调用setRow完成赋值即可，从根源避免闭包问题，同时提升渲染性能。

修正后的完整组件代码如下：

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() {
  // 命名调整为rows，和DataGrid入参对应，语义更清晰
  const [rows, setRows] = useState([]);

  useEffect(() => {
    const getAdmins = async () => {
      const adminsSnapshot = await getDocs(collection(db, "admins"));
      // 批量转换所有文档为表格行数据
      const adminList = adminsSnapshot.docs.map((doc) => {
        const data = doc.data();
        return {
          id: data.email,
          name: data.name,
          email: data.email,
          roles: data.roles,
          isSuspended: data.isSuspended,
          lastUpdated: data.lastUpdated,
          updatedByEmail: data.updatedByEmail,
        };
      });
      // 单次完成状态更新
      setRows(adminList);
    };

    getAdmins();
  }, []);

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

如果后续遇到必须逐次追加状态的场景，可以使用函数式更新的写法避开闭包问题，写法为setRow(prev => [...prev, 新项])，但这类批量查询后统一赋值的场景不推荐使用该方式。

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