如何避免更新嵌套对象中的数组时将其转为对象

哦，我太懂这个坑了！手动处理Redux的不可变状态更新时，很容易在数组和对象的展开语法上搞混，你现在的问题就是典型的例子。

问题根源 #

你代码里用了{ ...state.a.b.c }来拷贝数组c——但对象展开语法{...}是用来处理对象的，当你把数组传进去时，它会把数组的索引作为键，把数组元素作为值，转成一个普通的JavaScript对象（比如[x,y]会变成{0:x, 1:y}）。这样后续代码再对c执行数组操作（比如map、push）时，自然就会崩溃，因为它已经不是数组了。

正确的更新方式 #

要正确拷贝数组并修改指定元素，你需要用数组展开语法[...]，或者用数组的map/slice方法来生成新数组，同时保持数组结构不变。这里有两种常用写法：

写法1：用map遍历数组（适合需要根据条件修改元素的场景）

// 在你的reducer中
return {
  ...state,
  a: {
    ...state.a,
    b: {
      ...state.a.b,
      c: state.a.b.c.map((item, index) => {
        // 只修改索引为0的元素
        if (index === 0) {
          return { ...item, d: "new value" };
        }
        // 其他元素直接返回，保持引用不变
        return item;
      })
    }
  }
};

写法2：直接替换目标元素+展开剩余元素（适合明确知道要修改的索引的场景）

这种写法更简洁，直接把要修改的元素替换掉，然后展开数组剩下的部分：

return {
  ...state,
  a: {
    ...state.a,
    b: {
      ...state.a.b,
      c: [
        // 修改索引0的元素
        { ...state.a.b.c[0], d: "new value" },
        // 展开数组中从索引1开始的所有元素，生成新数组
        ...state.a.b.c.slice(1)
      ]
    }
  }
};

更省心的方案：使用Immer库 #

如果你的状态嵌套层级很深，手动写这种嵌套展开的代码不仅繁琐，还容易出错。推荐使用Immer库，它允许你用“看起来可变”的语法来编写不可变更新，内部会自动帮你处理正确的拷贝逻辑，完全避免这类问题：

首先安装Immer：

npm install immer

然后在reducer中使用：

import { produce } from 'immer';

function yourReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_D_VALUE':
      // 使用produce生成新状态
      return produce(state, draft => {
        // 直接像修改普通对象一样修改draft，Immer会处理不可变逻辑
        draft.a.b.c[0].d = "new value";
      });
    default:
      return state;
  }
}

这样写起来既简洁又不容易出错，再也不用纠结数组和对象的展开语法了。

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