使用state reducer无法向空数组添加元素的语法问题求助

核心错误点 #

你代码的问题集中在ADD_CHILD分支的逻辑编写，有两个核心错误：

• 语法错误：state.childern[action.index[{ id: action.payload }]]属于非法的数组索引写法，JS无法正确解析，完全没有实现向指定下标子数组追加元素的逻辑
• 不符合reducer immutable更新规则：修改state的嵌套数组时，不能直接修改原state引用，需要逐层拷贝对应结构后再修改

修正后的reducer代码 #

export default (state, action) => {
  switch (action.type) {
    case ADD_BOX:
      return {
        ...state,
        boxes: [...state.boxes, { id: action.id, index: action.index }],
        // 注：这里的childern是拼写错误，正确应为children，建议后续统一修正避免踩坑
        childern: [...state.childern, []],
      };

    case ADD_CHILD:
      // 先浅拷贝整个children数组
      const newChildern = [...state.childern];
      // 取出目标下标的子数组，浅拷贝后追加新元素，再替换回对应位置
      newChildern[action.index] = [...newChildern[action.index], { id: action.payload }];
      return {
        ...state,
        childern: newChildern,
      };
    default:
      return state;
  }
};

逻辑说明 #

修正后的ADD_CHILD分支处理逻辑：

1. 先对原childern数组做浅拷贝，避免直接修改原state
2. 取出action.index对应位置的子数组，浅拷贝后追加新的payload元素
3. 将处理后的子数组替换回拷贝后的childern数组对应位置，最终返回新的state对象，即可触发状态正确更新

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