React Redux执行更新后全局状态异常及MUI DataGrid报错排查

核心问题拆解 #

你遇到的两个问题是连锁的：

• 更新model时products、parts状态被意外修改 → 基本是状态引用污染，也就是处理更新逻辑时直接修改了Redux的原始状态对象，没返回新的引用，导致其他关联状态跟着变动
• MUI DataGrid报ID错误 → 要么是状态污染后，products/parts的行数据ID重复了，要么是行数据的引用被篡改，ID字段出现异常

具体排查点 #

1. 检查Models Reducer的更新逻辑 #

Redux的reducer必须是纯函数，绝对不能直接修改原state对象，必须返回新对象。如果你的update逻辑是下面这种写法，肯定会出问题：

// 错误写法：直接修改原state
case UPDATE_MODEL:
  state.models[action.payload.id] = action.payload;
  return state;

正确的写法需要创建新的状态副本：

// 正确写法：返回全新的状态对象
case UPDATE_MODEL:
  return {
    ...state,
    models: {
      ...state.models,
      [action.payload.id]: action.payload
    }
  };

2. 检查ModelForm里的数据处理 #

如果提交表单时直接修改了从Redux获取的原始model对象，再dispatch给reducer，也会污染状态。比如：

// 错误写法：直接修改原始对象
const handleSubmit = () => {
  model.name = formValues.name;
  dispatch(updateModel(model));
};

必须先复制一份对象再修改：

// 正确写法：创建对象副本
const handleSubmit = () => {
  const updatedModel = { ...model, ...formValues };
  dispatch(updateModel(updatedModel));
};

3. 核对DataGrid的ID配置 #

看看products、parts对应的DataGrid有没有正确设置getRowId属性。如果行数据的ID字段不是默认的id（比如是productId），必须显式指定：

<DataGrid
  rows={products}
  getRowId={(row) => row.productId} // 替换成你实际使用的ID字段
  // 其他配置项
/>

另外，更新操作后打印products/parts的行数据，检查是否出现重复ID——这很可能是状态污染导致行数据被意外覆盖。

4. 检查状态关联的逻辑 #

如果models和products、parts之间存在数据关联（比如model里存储了products的引用），更新model时要是直接传递了原始的products引用，也会污染状态。这种情况要确保所有关联数据都做了深拷贝，或者用Immer这类库简化不可变状态的处理。

快速验证技巧 #

在reducer的UPDATE_MODEL分支里，打印state和action.payload的引用地址，再打印更新后的状态，确认是否返回了新对象。同时在update动作执行前后，分别打印products、parts的状态，看看是否在update之前就已经被修改，快速定位污染发生的环节。

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