React购物车中仅特定id商品出现NaN值的解决咨询

问题根源分析 #

从代码中可以定位到两个核心问题：

1. 购物车初始值未包含id=6的商品
   在DataContext.js的getDefaultCart函数中，循环条件为for (let i = 1; i < ItemsList.length; i++)。假设ItemsList包含id从1到6的6个商品，ItemsList.length等于6，循环只会执行到i=5，导致cart对象中不存在6这个键，初始时cartItems[6]为undefined。

2. 加减商品时未处理未初始化的键
   addItemToCart和removeItemFromCart函数直接对prev[itemId]进行加减操作：

   setCartItems((prev) => ({ ...prev, [itemId]: prev[itemId] + 1 }));
   

   当prev[itemId]为undefined时，undefined + 1会得到NaN，后续显示时就会出现NaN值。

具体修复方案 #

1. 修正购物车初始值生成逻辑

将getDefaultCart改为遍历ItemsList中的每个商品，根据商品id初始化购物车，确保所有商品都被覆盖：

const getDefaultCart = () => {
  let cart = {};
  // 遍历所有商品，按id初始化数量为0
  ItemsList.forEach(item => {
    cart[item.id] = 0;
  });
  return cart;
};

2. 修复加减商品的逻辑

在addItemToCart和removeItemFromCart中，先判断当前商品数量是否存在，不存在则取0，避免NaN，同时防止数量变为负数：

const addItemToCart = (itemId) => {
  setCartItems((prev) => ({ 
    ...prev, 
    [itemId]: (prev[itemId] || 0) + 1 
  }));
};

const removeItemFromCart = (itemId) => {
  setCartItems((prev) => ({ 
    ...prev, 
    [itemId]: Math.max((prev[itemId] || 0) - 1, 0) 
  }));
};

3. 优化商品数量显示的判断逻辑

在Goods.jsx中，确保只在数量为有效数字时显示：

{typeof cartItemStored === 'number' && <> ({cartItemStored}) </>}

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