NGRX/Redux store中数组内对象属性更新失败问题排查

嘿，我一眼就发现你代码里的问题了——你更新results对象的方式完全错了，这才导致状态没生效！

问题根源 #

你原本的意图是更新results['FORMS']数组里的指定对象，但你却把map处理后的数组直接用...展开到results对象中。这相当于给results新增了一堆以数组索引为键的属性（比如results[0]、results[1]），根本没修改到原本的'FORMS'键，所以state.results自然不会有任何变化。

另外还有个小问题：你返回新状态时没有扩展原state，如果原state还有其他属性，会被直接覆盖掉，这也是个潜在的bug。

修复后的代码 #

case LOAD_SUCCESS: {
  const form = (action as LoadSuccessAction).form;
  // 先处理FORMS数组，生成更新后的新数组
  const updatedForms = state.results['FORMS'].map(item => 
    item.id === form.id ? {...item, categories: form.categories} : item
  );
  return {
    ...state, // 扩展原state，保留其他未修改的状态属性
    results: {
      ...state.results, // 扩展原results对象，保留其他键值对
      'FORMS': updatedForms // 替换FORMS键为更新后的数组
    },
    loading: false,
    loaded: true
  };
}

关键修复点说明 #

• 扩展原state：...state确保不会丢失原状态中除了results、loading、loaded之外的其他属性
• 正确更新results：先扩展原results对象保留其他键，再单独替换'FORMS'为处理后的新数组，这才是修改字典中指定数组的正确方式
• 保持不可变性：全程使用扩展运算符...和map生成新对象/数组，符合Redux对状态不可变的要求

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