React Native购物车AsyncStorage计数异常：所有商品计数同步增减

问题根源 #

• 存储结构矛盾：cartItems实际存储的是单纯ID数组，但增减函数中错误将其当作带count属性的对象数组操作，逻辑完全混乱。
• 引用全局原始对象：getDataFromDB直接把Items中的原始商品对象推入productData，所有商品的count指向全局Items的同一属性，修改一个会同步影响所有引用该对象的地方。
• 状态管理错误：全局count本应是购物车总数量，却被用来控制单个商品计数，且增减函数未正确更新AsyncStorage中的购物车数据。

具体修复步骤及代码 #

1. 修正购物车存储结构

将cartItems改为存储包含商品ID和对应计数的对象数组，示例格式：

// AsyncStorage中cartItems的存储内容
[{ id: 1, count: 2 }, { id: 2, count: 1 }]

2. 修改getDataFromDB函数

读取购物车数据后，与原始商品数据组合生成带正确计数的列表，避免直接引用全局原始对象：

const getDataFromDB = async () => {
  let cartItems = await AsyncStorage.getItem("cartItems");
  cartItems = cartItems ? JSON.parse(cartItems) : [];
  
  // 组合原始商品数据与购物车计数
  const productData = cartItems.map(cartItem => {
    const originalItem = Items.find(item => item.id === cartItem.id);
    return {
      ...originalItem, // 复制原始商品信息
      count: cartItem.count // 使用购物车中的计数，而非原始数据的count
    };
  });

  setProduct(productData.length > 0 ? productData : false);
  getTotal(productData);
  // 计算购物车总数量
  const totalCount = cartItems.reduce((sum, item) => sum + item.count, 0);
  setCount(totalCount);
};

3. 修复增减计数函数

正确定位商品条目，修改计数后更新AsyncStorage，并重新拉取数据更新界面：

const increment = async (id) => {
  let cartItems = await AsyncStorage.getItem("cartItems");
  cartItems = cartItems ? JSON.parse(cartItems) : [];

  const itemIndex = cartItems.findIndex(item => item.id === id);
  if (itemIndex !== -1) {
    cartItems[itemIndex].count += 1;
  } else {
    // 商品不在购物车时添加新条目（可根据业务逻辑调整）
    cartItems.push({ id, count: 1 });
  }

  await AsyncStorage.setItem("cartItems", JSON.stringify(cartItems));
  getDataFromDB(); // 重新拉取数据更新状态
};

const decrement = async (id) => {
  let cartItems = await AsyncStorage.getItem("cartItems");
  cartItems = cartItems ? JSON.parse(cartItems) : [];

  const itemIndex = cartItems.findIndex(item => item.id === id);
  if (itemIndex !== -1) {
    cartItems[itemIndex].count -= 1;
    // 计数为0时移除商品（可根据业务逻辑调整）
    if (cartItems[itemIndex].count <= 0) {
      cartItems.splice(itemIndex, 1);
    }
  }

  await AsyncStorage.setItem("cartItems", JSON.stringify(cartItems));
  getDataFromDB();
};

4. 前端渲染注意事项

渲染商品时，使用product数组中每个item的count属性，而非全局Items的count：

// 示例渲染代码
{product && product.map(item => (
  <div key={item.id}>
    <span>{item.productName}</span>
    <button onClick={() => decrement(item.id)}>-</button>
    <span>{item.count}</span>
    <button onClick={() => increment(item.id)}>+</button>
  </div>
))}

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