在React和Redux中删除二维数组指定元素且不产生突变的实现方法

你当前的写法仅适用于一维数组的元素删除，无法匹配二维嵌套结构中的内层目标元素，同时Redux reducer要求不能修改原state数据，需要通过逐层拷贝更新的方式实现无突变操作。

正确实现代码 #

case appConstants.DELETE_IMAGE_SUCCESS:
  return {
    ...state,
    // 遍历外层数组，仅修改包含目标元素的项
    productImages: state.productImages.map(outerItem => {
      // 适配两种常见二维结构：外层项直接是内层数组/外层项是包含图片数组的对象
      const innerList = Array.isArray(outerItem) ? outerItem : outerItem.images
      const hasTarget = innerList.some(img => img === action.payload)

      // 不包含目标元素直接返回原项，无需拷贝
      if (!hasTarget) return outerItem

      // 包含目标元素则返回新的项，对内层数组做过滤
      if (Array.isArray(outerItem)) {
        return innerList.filter(img => img !== action.payload)
      }
      return {
        ...outerItem,
        images: innerList.filter(img => img !== action.payload)
      }
    })
  };

注意事项 #

• 若你要删除的是对象类型的图片元素，不要用===做引用匹配，替换为img.id === action.payload.id这类唯一标识匹配逻辑，避免引用不一致导致匹配失败。
• 未发生数据变动的层级直接返回原有引用即可，不需要全量拷贝，能避免不必要的组件重渲染。
• 注意确认state字段名匹配，你现有代码中将过滤结果赋值给了products字段，需要确认和你的业务字段定义一致，避免赋值错误导致数据不生效。

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