MUI X Data Grid中processRowUpdate参数返回错误值的问题求助

问题核心 #

你的代码中processRowUpdate函数未返回更新后的行对象，导致DataGrid无法同步内部状态，进而触发onProcessRowUpdateError报错，同时因React状态更新的异步性，出现newRow值显示异常的问题。

修复方案 #

修改processRowUpdate函数，确保返回更新后的行对象，同时利用状态更新回调获取最新的行数据：

<DataGrid
  // 其他原有属性保持不变
  processRowUpdate={(newRow, oldRow) => {
    setEditItem(false);
    // 合并新旧行数据，生成最终更新行
    const updatedRow = { ...oldRow, ...newRow };
    // 通过prevVals获取最新的行数组状态，避免异步更新导致的旧值问题
    setLineItemRows((prevVals) =>
      prevVals.map((row) => row.id === newRow.id ? updatedRow : row)
    );
    // 必须返回更新后的行，供DataGrid同步自身内部状态
    return updatedRow;
  }}
/>

关键说明 #

1. 强制返回更新行：MUI X DataGrid的processRowUpdate要求必须返回最终的行对象（或resolve为该行的Promise），组件依赖这个返回值同步内部行状态，缺失返回值会直接触发错误。
2. 使用状态更新回调：通过setLineItemRows(prevVals => ...)获取最新的行数组，避免直接读取外部lineItemRows（React状态更新是异步的，直接读取可能拿到未更新的旧值）。
3. 正确合并行数据：用{...oldRow, ...newRow}保留旧行中未修改的字段，同时覆盖编辑后的字段，保证行数据的完整性。

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