React Native中使用Redux修改商品status状态报错，如何修复？

错误原因分析 #

1. 拼写错误：代码中state.lists.proucts是笔误，正确应为products。
2. 数据结构访问错误：state.lists是数组类型，而非单个对象，直接调用state.lists.products会返回undefined，自然无法调用findIndex方法。
3. 不可变更新违规：你直接修改了原state的属性（state.lists.products[newList].status = !...），违反了Redux要求的不可变更新原则，会导致状态变更无法被正确追踪。

修复后的Reducer代码 #

假设你的action包含productId（要修改的商品ID）和listId（商品所属的清单ID，更高效定位），修复后的逻辑如下：

case CHANGE_PRODUCT_STATUS:
  // 不可变更新嵌套数组，先复制原lists数组
  const updatedLists = state.lists.map(list => {
    // 找到目标清单
    if (list.id === action.listId) {
      // 复制该清单的products数组，修改目标商品的status
      const updatedProducts = list.products.map(product => {
        if (product.id === action.productId) {
          return { ...product, status: !product.status };
        }
        return product;
      });
      return { ...list, products: updatedProducts };
    }
    return list;
  });

  return {
    ...state,
    lists: updatedLists
  };

如果你的action只提供productId（假设商品ID全局唯一），可以用以下逻辑遍历所有清单查找目标商品：

case CHANGE_PRODUCT_STATUS:
  const updatedLists = state.lists.map(list => {
    const targetProductIndex = list.products.findIndex(product => product.id === action.productId);
    // 如果当前清单不包含目标商品，直接返回原清单
    if (targetProductIndex === -1) {
      return list;
    }
    // 复制products数组并修改目标商品的status
    const updatedProducts = [...list.products];
    updatedProducts[targetProductIndex] = {
      ...updatedProducts[targetProductIndex],
      status: !updatedProducts[targetProductIndex].status
    };
    return { ...list, products: updatedProducts };
  });

  return {
    ...state,
    lists: updatedLists
  };

关键修复点说明 #

• 不可变更新：通过map和扩展运算符（...）复制原数组和对象，避免直接修改原state。
• 正确访问嵌套结构：先遍历lists数组找到目标清单，再在该清单的products数组中定位目标商品。
• 避免拼写错误：确保所有属性名拼写正确（比如products而非proucts）。

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