ReactJS中如何向嵌套在对象数组中的对象数组添加新对象？

别担心，刚接触React和Redux的时候，处理嵌套状态的更新确实容易搞混，我来帮你理清楚问题出在哪，以及怎么正确修改。

首先看你原来的代码，问题主要出在返回新状态的结构上：你的原state是一个数组，但你返回的时候把它包裹成了一个对象（[ { ...state, [0]: {...} } ]），这相当于把原数组的元素展开成对象的键（比如索引0、1等变成对象的key），然后又加了一个[0]键，这样整个状态的结构就完全变了，自然会导致状态混乱。

正确的做法是保持state的数组结构，只替换需要更新的那个元素（这里是索引0的项），同时正确更新它的嵌套数组属性。

正确的写法（针对固定索引0的情况） #

你可以直接创建一个新数组，保留原数组中除了第0项之外的所有元素，同时生成一个更新后的第0项：

// 假设action里的新对象是action.newObject（根据你的描述调整变量名）
return [
  // 更新第0个元素：拷贝原元素的所有属性，替换嵌套数组
  {
    ...state[0],
    someNestedArrayProperty: [
      ...state[0].someNestedArrayProperty,
      action.newObject // 把新对象添加到嵌套数组末尾
    ]
  },
  // 保留原数组中从第1项开始的所有元素
  ...state.slice(1)
];

更通用的写法（根据id查找要更新的项） #

如果以后你不是固定更新第0项，而是根据id来定位要修改的元素，推荐用map方法遍历数组，这样更灵活：

return state.map(item => {
  // 找到需要更新的项（这里假设要更新id为"1"的元素）
  if (item.id === "1") {
    return {
      ...item,
      someNestedArrayProperty: [...item.someNestedArrayProperty, action.newObject]
    };
  }
  // 其他项直接返回，保持不变
  return item;
});

再拆解下你的错误点 #

你原来的代码里：

return [
  {
    ...state,
    [0]: { ...state[0], someNestedArrayProperty: someNestedArrayProperty }
  }
];

这里的问题是：

1. ...state把原数组展开成了对象的键值对（比如数组的索引变成对象的key，对应的值是数组元素）
2. 然后你又添加了[0]这个键，相当于在对象里又存了一份更新后的第0项
3. 最后把这个对象放到数组里，导致整个state变成了[ { 0: {...}, 1: {...}, [0]: {...} } ]这种奇怪的结构，完全偏离了原有的数组结构

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