MUI DataGridPro列定义中valueOptions无法获取row的问题求助

核心问题原因 #

DataGridPro的valueOptions属性默认在非编辑状态或数据未完全加载时，无法可靠获取当前行（row）对象，直接访问会导致row为undefined的报错。

解决方案 #

方案1：自定义编辑单元格（推荐，可控性强） #

放弃直接通过valueOptions配置，改用renderEditCell自定义编辑时的下拉组件，此时可以稳定获取当前行的所有字段：

import { DataGridPro } from '@mui/x-data-grid-pro';
import { Select, MenuItem } from '@mui/material';

const columns = [
  // 其他列配置...
  {
    field: 'targetField',
    headerName: '动态下拉列',
    editable: true,
    renderEditCell: (params) => {
      // 基于当前行的其他字段生成选项
      const dynamicOptions = params.row?.relatedList?.map(item => ({
        value: item.id,
        label: item.displayName
      })) || [];

      return (
        <Select
          value={params.value ?? ''}
          onChange={(e) => params.setEditCellValue(e.target.value)}
          fullWidth
        >
          {dynamicOptions.map(opt => (
            <MenuItem key={opt.value} value={opt.value}>
              {opt.label}
            </MenuItem>
          ))}
        </Select>
      );
    }
  }
];

// 组件渲染部分
function YourGridComponent() {
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟API请求加载数据
    fetch('/your-api-url')
      .then(res => res.json())
      .then(data => {
        setRows(data);
        setLoading(false);
      });
  }, []);

  return (
    <DataGridPro
      rows={rows}
      columns={columns}
      loading={loading}
      editMode="row" // 或"cell"，根据你的编辑模式调整
    />
  );
}

方案2：优化valueOptions函数（仅适用于singleSelect类型） #

如果你的列设置了type: 'singleSelect'，可以给valueOptions传入函数，同时增加空值判断，避免数据未加载时报错：

const columns = [
  {
    field: 'targetField',
    headerName: '动态下拉列',
    type: 'singleSelect',
    editable: true,
    valueOptions: (params) => {
      // 先判断row是否存在，避免报错
      if (!params.row?.relatedList) return [];
      // 基于行字段生成选项
      return params.row.relatedList.map(item => ({
        value: item.id,
        label: item.displayName
      }));
    }
  }
];

注意事项 #

• 确保DataGrid在API数据加载完成后再渲染，通过loading状态控制，避免在数据未就绪时触发valueOptions的函数执行。
• 如果使用编辑模式为row，确保进入编辑状态后row对象已完全加载。

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