React Redux中如何向第N个数组元素添加数据？

核心问题 #

你这段代码存在两个致命问题：

• 直接修改原state：Redux要求reducer必须是纯函数，不能直接修改传入的state对象。你用push直接修改原数组的方式违反了immutable原则，Redux检测不到state变化，所以组件不会更新，看起来像没添加成功。
• map函数未返回值：map遍历数组时必须返回每个元素，你当前的map函数没有return语句，执行后会把state.containers变成全是undefined的数组，后续操作自然失效。

修正后的代码 #

const id = action.payload.container_id;

state.containers = state.containers.map((cont) => {
  // 找到目标容器时，返回新对象实现immutable更新
  if (cont.info.id === id) {
    return {
      ...cont,
      info: {
        ...cont.info,
        // 复制原attributes数组并添加新元素，不修改原数组
        attributes: [
          ...cont.info.attributes,
          {
            id: action.payload.container_attr_id,
            value: action.payload.data.value,
            name: action.payload.data.name,
          }
        ]
      }
    };
  }
  // 非目标元素直接返回原对象
  return cont;
});

关键说明 #

• Immutable更新：每次修改嵌套对象时，要逐层解构复制原对象，再替换需要修改的部分，确保Redux能检测到state变化。
• 正确使用map：map的作用是生成新数组，必须返回每个元素，否则会破坏原数组结构。
• 无需手动维护索引：直接使用遍历得到的cont对象判断即可，不需要额外的key变量，避免索引错误。

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