MUI X Data Grid Pro动态列+固定列触发深度超限错误求助

核心原因 #

当固定列与动态生成列结合时，若每次渲染都重新创建完整的列数组，Data Grid会因列引用频繁变化触发重复重渲染，进而陷入渲染循环，抛出深度溢出错误。

解决方案 #

1. 用useMemo缓存完整列数组 #

将固定列与动态列的合并逻辑包裹在useMemo中，仅当动态列数据变化时才重新生成列数组，避免不必要的重渲染：

import { useMemo, useEffect, useState } from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

function POGrid() {
  const [dynamicCols, setDynamicCols] = useState([]);

  // 从API获取动态列配置
  useEffect(() => {
    const getColumns = async () => {
      const response = await fetch('/api/get-dynamic-columns');
      const columns = await response.json();
      setDynamicCols(columns);
    };
    getColumns();
  }, []);

  // 缓存合并后的列数组
  const columns = useMemo(() => {
    // 固定列配置，保持引用稳定
    const fixedPOColumn = [
      {
        field: 'PONumber',
        headerName: 'PO编号',
        width: 160,
        fixed: 'left',
      },
    ];

    // 合并固定列与动态列
    return [...fixedPOColumn, ...dynamicCols];
  }, [dynamicCols]); // 仅依赖动态列数据

  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGridPro
        columns={columns}
        rows={/* 你的行数据 */}
        // 其他配置
      />
    </div>
  );
}

export default POGrid;

2. 稳定动态列中的回调函数 #

如果动态列包含自定义renderCell、filterCell等回调，需用useCallback缓存这些函数，避免因回调引用变化导致列配置频繁更新：

// 缓存自定义单元格渲染函数
const renderStatusCell = useCallback((params) => {
  return <span className={`status-${params.value}`}>{params.value}</span>;
}, []);

// 处理动态列，绑定缓存后的回调
const processedDynamicCols = useMemo(() => {
  return dynamicCols.map(col => {
    if (col.field === 'status') {
      return { ...col, renderCell: renderStatusCell };
    }
    return col;
  });
}, [dynamicCols, renderStatusCell]);

// 最终列数组
const columns = useMemo(() => {
  const fixedPOColumn = [{ /* 固定列配置 */ }];
  return [...fixedPOColumn, ...processedDynamicCols];
}, [processedDynamicCols]);

3. 排查循环更新逻辑 #

检查是否存在“列生成触发状态更新→状态更新重新生成列”的循环：

• 避免在列配置的回调中直接修改组件状态
• 确保API获取动态列的逻辑仅在组件挂载或特定条件下执行（如依赖数组为空）

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