购物车商品数量增减异常问题排查与修复请求

问题现象 #

点击增加商品数量按钮时，商品数量未按预期增加1，而是大幅跳增（如增加5或6）；点击减少商品数量按钮时，数量反而出现上升情况。

问题根源 #

1. 核心逻辑冲突 #

CartContext 中的 addItemToCart 方法设计为累加传入的数量值，但购物车页面的 increaseQty 和 decreaseQty 方法却传递了新的总数量，导致计算逻辑叠加出错：

• 点击增加按钮：increaseQty 计算出 newQty = 当前数量+1，并将这个总数量传给 addItemToCart，而 addItemToCart 又执行 现有数量 + 传入的总数量，最终结果为 当前数量 + (当前数量+1)，造成数量翻倍式增长。
• 点击减少按钮：decreaseQty 计算出 newQty = 当前数量-1，传给 addItemToCart 后被当作增量加到现有数量上，结果为 当前数量 + (当前数量-1)，自然出现越减越多的情况。

2. 次要问题 #

• addItemToCart 声明为 async 但内部无异步操作，属于冗余代码；
• 购物车页面渲染商品列表时缺少唯一 key 属性，可能引发React渲染异常。

修复方案 #

方案1：修改 addItemToCart 适配总数量传入（推荐） #

调整 addItemToCart 逻辑，当传入完整商品信息时，直接覆盖现有商品的数量，而非累加：

// CartContext.js 中修改 addItemToCart 方法
const addItemToCart = ({
    product,
    name,
    price,
    discount,
    image,
    materials,
    size,
    quantity = 1,
}) => {
    const item = {
        product,
        name,
        price,
        discount,
        image,
        materials,
        size,
        quantity,
    }

    let newCartItems;
    const existingItemIndex = cart?.cartItems?.findIndex(i => i.product === item.product)

    if (existingItemIndex !== -1) {
        // 直接用传入的quantity覆盖现有数量
        const updatedItem = { ...cart.cartItems[existingItemIndex], quantity: item.quantity }
        newCartItems = [...cart.cartItems]
        newCartItems[existingItemIndex] = updatedItem
    } else {
        newCartItems = [...(cart?.cartItems || []), item]
    }

    localStorage.setItem("cart", JSON.stringify({ cartItems: newCartItems }))
    setCartToState()
};

方案2：修改购物车页面逻辑，传递增量而非总数量 #

若希望保留 addItemToCart 的累加逻辑，调整购物车页面的增减方法，仅传递增量值：

// Cart.js 中修改增减方法
const increaseQty = (cartItem) => {
    // 传递增量1，而非新的总数量
    addItemToCart({...cartItem, quantity: 1})
}

const decreaseQty = (cartItem) => {
    const newQty = cartItem?.quantity - 1
    if (newQty < 1) return
    // 传递增量-1，而非新的总数量
    addItemToCart({...cartItem, quantity: -1})
}

同时修改 CartContext.js 中的累加逻辑，处理负数增量并确保数量不小于1：

const addItemToCart = ({
    product,
    name,
    price,
    discount,
    image,
    materials,
    size,
    quantity = 1,
}) => {
    const item = {
        product,
        name,
        price,
        discount,
        image,
        materials,
        size,
        quantity,
    }

    let newCartItems;
    const existingItemIndex = cart?.cartItems?.findIndex(i => i.product === item.product)

    if (existingItemIndex !== -1) {
        const existingItem = cart.cartItems[existingItemIndex]
        // 计算新数量，确保不小于1
        const newQuantity = Math.max(1, existingItem.quantity + quantity)
        const updatedItem = { ...existingItem, quantity: newQuantity }
        newCartItems = [...cart.cartItems]
        newCartItems[existingItemIndex] = updatedItem
    } else {
        // 新增商品时确保数量至少为1
        newCartItems = [...(cart?.cartItems || []), {...item, quantity: Math.max(1, item.quantity)}]
    }

    localStorage.setItem("cart", JSON.stringify({ cartItems: newCartItems }))
    setCartToState()
};

额外修复：添加列表项key属性 #

购物车页面渲染商品列表时，添加唯一key避免React渲染异常：

// Cart.js 中修改map循环
{cart?.cartItems?.map((cartItem) => (
    <div key={cartItem.product} className='border-b border-gray-200 bg-white shadow-sm rounded mb-5 p-3 lg:p-5'>
        {/* 其余内容保持不变 */}
    </div>
))}

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