如何从后端获取数据实现可编辑的MUI X DataGrid？

核心问题分析 #

你遇到的页面无响应，大概率是因为Columns引用不稳定或状态更新方式错误导致的重复渲染/死循环，结合React状态管理规则，下面是具体解决方案：

1. 正确初始化状态与加载异步数据 #

用useState管理表格行、列数据，搭配useEffect发起异步请求，同时加入加载状态避免初始渲染异常：

import { useState, useEffect, useMemo } from 'react';
import { DataGrid, GridColDef, GridRowModel } from '@mui/x-data-grid';
import { getData } from './your-data-file'; // 导入你的异步方法

export default function EditableDataGrid() {
  const [rows, setRows] = useState<GridRowModel[]>([]);
  const [fetchedColumns, setFetchedColumns] = useState<GridColDef[]>([]);
  const [loading, setLoading] = useState(true);
  const [editRowId, setEditRowId] = useState<number | null>(null); // 管理当前编辑的行ID

  // 异步加载数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        const result = await getData();
        // 确保后端返回的rows包含唯一id字段（DataGrid必填）
        setRows(result.rows);
        setFetchedColumns(result.columns);
      } catch (err) {
        console.error('加载数据失败:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []); // 空依赖确保仅加载一次

2. 稳定Columns引用（关键） #

DataGrid对Columns的引用变化非常敏感，必须用useMemo缓存合并后的列配置（后端返回列 + 固定操作列），避免每次渲染生成新数组导致的重渲染死循环：

// 用useMemo缓存合并后的列，确保引用稳定
  const columns = useMemo(() => {
    // 固定操作列
    const actionColumn: GridColDef = {
      field: 'actions',
      headerName: '操作',
      width: 200,
      sortable: false,
      disableColumnMenu: true,
      renderCell: (params) => {
        const isEditing = params.id === editRowId;

        if (isEditing) {
          return (
            <>
              <button onClick={() => handleSaveRow(params.id)}>保存</button>
              <button onClick={() => handleCancelRow()}>取消</button>
            </>
          );
        }

        return (
          <>
            <button onClick={() => handleEditRow(params.id)}>编辑</button>
            <button onClick={() => handleDeleteRow(params.id)}>删除</button>
          </>
        );
      },
    };

    // 合并后端列与操作列
    return [...fetchedColumns, actionColumn];
  }, [fetchedColumns, editRowId]); // 依赖仅为后端列和编辑状态ID

3. 正确处理编辑/保存/取消/删除的状态更新 #

React状态必须保持不可变性，更新rows时要创建新数组，不能直接修改原数据：

// 编辑行：记录当前编辑的ID
  const handleEditRow = (id: number) => {
    setEditRowId(id);
  };

  // 保存行：更新对应行的数据，结束编辑状态
  const handleSaveRow = (id: number) => {
    setRows(prevRows => 
      prevRows.map(row => 
        row.id === id ? { ...row, isEditing: false } : row
      )
    );
    setEditRowId(null);
  };

  // 取消编辑：直接清除编辑ID
  const handleCancelRow = () => {
    setEditRowId(null);
  };

  // 删除行：过滤掉目标行
  const handleDeleteRow = (id: number) => {
    setRows(prevRows => prevRows.filter(row => row.id !== id));
  };

4. 渲染表格 #

加入加载状态提示，避免无数据时的异常：

if (loading) {
    return <div>加载中...</div>;
  }

  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        rowKey="id" // 必须指定唯一行键，确保行的稳定性
        disableRowSelectionOnClick
      />
    </div>
  );
}

常见错误排查 #

• 没有缓存Columns：如果每次渲染都重新创建columns数组，DataGrid会不断销毁重建表格，引发编辑状态混乱和页面无响应
• useEffect依赖错误：如果给useEffect加了rows或columns作为依赖，会导致数据更新后重新发起请求，形成无限循环
• 直接修改原状态：比如rows[id].isEditing = true这种写法，React无法感知状态变化，导致表格不更新，进而引发异常

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