MUI X Data Grid：onCellEditStop致已编辑单元格值异常变更求解决方案

数据老陈

2026-8-3

修复MUI X Data Grid编辑新单元格时旧单元格值被篡改的问题

问题出在哪？

你现在的代码直接修改了staffFactions数组里的faction对象——因为数组里存的是对象引用，改这个对象等于直接修改了state里的原始数据。React和Data Grid都依赖状态的不可变性来判断数据是否更新，直接改原对象会让网格搞不清哪些行真正变了，结果就是编辑新单元格时旧数据被错误覆盖。

两种修复方案

方案1：改成不可变的状态更新

把onCellEditStopHandler改成不碰原对象，每次都生成新对象和新数组：

const onCellEditStopHandler = (params: GridCellParams) => {
  const { id, field, value } = params;
  
  // 遍历数组，只修改目标行并返回新对象
  const updatedFactions = staffFactions.map(faction => {
    if (faction.id === id) {
      return { ...faction, [field]: value };
    }
    return faction;
  });

  setStaffFactions(updatedFactions);
};

方案2：用官方推荐的`processRowUpdate`（更稳妥）

既然你开了newEditingApi，直接用新API里的processRowUpdate更合适，它是专门用来处理行更新的：

修改你的Data Grid组件：

<ReactDataGrid
  experimentalFeatures={{ newEditingApi: true }}
  rows={staffFactions}
  columns={columns}
  processRowUpdate={(newRow) => {
    // 生成更新后的数组
    const updatedFactions = staffFactions.map(faction => 
      faction.id === newRow.id ? newRow : faction
    );
    setStaffFactions(updatedFactions);
    // 返回新行让网格同步状态
    return newRow;
  }}
/>

用这个方法就不用自己写onCellEditStop了，编辑完成后会自动触发更新，而且完全符合不可变性要求，能彻底解决旧单元格值被篡改的问题。