React电商购物车：解决唯一key报错与NaN值问题

一、解决"Each child in a list should have a unique 'key' prop"警告 #

这个警告的核心原因是你循环渲染购物车商品时，用了数组索引(index)作为key，删除商品后索引会重新排序，导致React无法正确识别列表元素的唯一性。

修复方式：
直接使用商品的唯一ID（你在商品页设置的那个ID，比如item.id）作为key，绝对不要用索引。

示例代码修改：

// 错误写法（用索引当key）
{cartItems.map((item, index) => (
  <CartItem key={index} {...item} />
))}

// 正确写法（用商品唯一ID当key）
{cartItems.map((item) => (
  <CartItem key={item.id} {...item} />
))}

二、解决删除商品后出现NaN值的问题 #

NaN通常是非数值类型参与数学运算或数组处理逻辑错误导致的，按以下步骤排查修复：

1. 修正购物车删除逻辑 #

不要通过索引删除商品，改用商品唯一ID过滤数组，避免索引混乱导致的无效元素：

// CartContext中错误的删除逻辑（用索引）
const removeFromCart = (index) => {
  const newCart = [...cartItems];
  newCart.splice(index, 1);
  setCartItems(newCart);
};

// 正确的删除逻辑（用商品ID）
const removeFromCart = (productId) => {
  const newCart = cartItems.filter(item => item.id !== productId);
  setCartItems(newCart);
};

2. 确保价格、数量为数值类型 #

检查添加商品到购物车的逻辑，保证存入的price和quantity是数值，而非字符串：

// 添加商品时的修正逻辑
const addToCart = (product) => {
  const existingItem = cartItems.find(item => item.id === product.id);
  if (existingItem) {
    setCartItems(cartItems.map(item => 
      item.id === product.id 
        ? {...item, quantity: item.quantity + 1} // 确保quantity是数值
        : item
    ));
  } else {
    // 强制转换price为数值，quantity初始化为1
    setCartItems([...cartItems, {...product, quantity: 1, price: Number(product.price)}]);
  }
};

3. 总价计算时做容错处理 #

计算购物车总价时，对价格和数量做类型转换和空值容错，避免非数值参与运算：

// 错误的总价计算（直接运算）
const total = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);

// 正确的总价计算（容错处理）
const total = cartItems.reduce((sum, item) => {
  const price = Number(item.price) || 0;
  const quantity = Number(item.quantity) || 0;
  return sum + price * quantity;
}, 0);

总结修复步骤 #

1. 所有循环渲染购物车商品的组件，将key改为商品唯一ID；
2. 把删除商品的逻辑从"按索引删除"改成"按商品ID过滤数组"；
3. 确保添加到购物车的商品，price和quantity都是数值类型；
4. 总价计算时加入类型转换和空值容错。

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