MUI DataGrid视图模式无法持久化问题求助

核心结论 #

你遇到的单元格无法退出编辑状态的问题，完全和控制台抛出的错误直接相关。Cannot read properties of undefined (reading 'id')这个错误会打断DataGrid的编辑状态流转逻辑，导致单元格卡在编辑模式。

错误根源拆解 #

1. processRowUpdate异步处理不规范
   当前processRowUpdate没有返回axios请求的Promise，DataGrid无法感知异步更新的完成状态，会默认判定更新失败，进而维持编辑状态。同时useCallback未添加依赖数组，导致rows始终是组件初始化时的旧状态，更新行数据时可能出现匹配错误，甚至生成缺失id的行对象，触发getRowId报错。
2. 手动修改cellModesModel的逻辑冲突
   你使用了DataGrid的新编辑API（experimentalFeatures={{ newEditingApi: true }}），该API会自动管理单元格模式，手动绑定onCellEditStop={handleCancel}修改cellModesModel，会和组件内部状态产生冲突。

具体修复步骤 #

1. 修复processRowUpdate函数 #

确保返回Promise，添加正确依赖数组，并用函数式更新避免闭包问题：

const processRowUpdate = React.useCallback(
  (newRow) => {
    // 返回axios请求的Promise，让DataGrid感知更新状态
    return axios.put(`http://localhost:8000/mvhr/`, newRow)
      .then((response) => {
        const updatedRow = { ...newRow, isNew: false };
        // 函数式更新获取最新rows状态，避免闭包问题
        setRows(prevRows => prevRows.map((row) => (row.id === newRow.id ? updatedRow : row)));
        setSnackbar({ children: tableName + ' 保存成功', severity: 'success' });
        return updatedRow; // 返回更新后的行，同步DataGrid内部状态
      })
      .catch(error => {
        // 手动抛出错误，触发错误回调
        throw error;
      });
  },
  [tableName] // 添加依赖数组
);

2. 移除冗余的onCellEditStop绑定 #

新编辑API会自动处理单元格失焦退出编辑的逻辑，无需手动干预：

<StripedDataGrid
  rows={rows}
  columns={columns}
  processRowUpdate={processRowUpdate}
  onProcessRowUpdateError={handleProcessRowUpdateError}
  // 移除这一行：onCellEditStop={handleCancel}
  cellModesModel={cellModesModel}
  onCellModesModelChange={(model) => setCellModesModel(model)}
  // ...其他属性不变
/>

3. 修复handleDeleteClick的闭包问题 #

同样改用函数式更新获取最新rows状态：

const handleDeleteClick = (id) => () => {
  axios.delete(`http://localhost:8000/delete_mvhr/${id}`)
    .then(() => {
      setRows(prevRows => prevRows.filter((row) => row.id !== id));
      setSnackbar({ children: tableName + ' 删除成功', severity: 'success' });  
    });
};

4. 验证行数据的id字段 #

确保后端返回的行数据中id字段存在且不为undefined，如果自定义了getRowId函数，要确认它能正确从行对象中提取唯一标识。

验证修复 #

完成修改后重新测试：

• 编辑单元格后点击其他区域，单元格应正常退出编辑模式
• 控制台不再出现Cannot read properties of undefined (reading 'id')错误
• 数据更新、删除操作能正确同步到表格中

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