React购物车同ID商品删除异常：点击删单个却移除全部的问题

用户可将同一商品多次添加至购物车，但点击删除其中一个同ID商品时，所有同ID商品都会被移除，而非仅删除目标商品。

前端代码 #

const { user } = useSelector((state) => state.signin);
const handleRemoveFromCart = (userId, itemId) => {
    axios.delete(`http://localhost:3003/cartItems/${userId}/${itemId}`)
        .then((response) => {
            console.log(response.data);
        })
        .catch((error) => {
            console.error(error);
        });
};

{products.map((product) => (
    <div className="text-[12px] gap-[10px] flex mb-[20px]">
        {/* <img className="w-[200px]" src={`data:${cartItem};base64,${Buffer.from(cartItem.image).toString('base64')}`} /> */}
        <div className="flex flex-col">
            <p className="font-medium">{product.title}</p>
            <div className="flex relative">
                <p>{product.price}</p>
            </div>
            <p onClick={() => handleRemoveFromCart(user._id, product._id)}>Remove item x</p>
        </div>
    </div>
))}

后端代码 #

router.delete('/cartItems/:userId/:itemId', (req, res) => {
    const { userId, itemId } = req.params;  
    User.findOneAndUpdate(
        { _id: userId },
        { $pull: { cartItems: { _id: itemId } } },
        { new: true }
    )
    .then((updatedUser) => {
        if (updatedUser) {
            console.log(updatedUser);
            res.status(200).json(updatedUser.cartItems);
        } else {
            res.status(404).json({ error: 'User or item not found' });
        }
    })
    .catch((err) => {
        console.error(err);
        res.status(500).json({ error: 'Server error' });
    });
});

核心原因 #

当前删除逻辑用商品的_id作为购物车项的标识，但同一商品多次加入购物车时，这些购物车项的商品_id完全相同。后端用$pull匹配cartItems._id: itemId时，会把所有商品_id等于itemId的购物车项全部移除，而非单个项。

解决步骤 #

1. 调整购物车项数据结构
   后端添加商品到购物车时，每个cartItem要生成独立的唯一标识（比如MongoDB自动生成的_id），购物车项结构示例：

   // 用户模型中的cartItems字段结构
   cartItems: [
       {
           _id: ObjectId("xxx"), // 购物车项自身的唯一ID
           productId: ObjectId("商品ID"), // 关联的商品ID
           title: "商品标题",
           price: 99,
           // 其他商品信息...
       }
   ]
   

2. 前端修改删除参数
   遍历购物车项时，传递购物车项自身的_id而非商品_id：

   // 假设当前遍历的是cartItems数组，每个项是cartItem
   {cartItems.map((cartItem) => (
       <div className="text-[12px] gap-[10px] flex mb-[20px]">
           <div className="flex flex-col">
               <p className="font-medium">{cartItem.title}</p>
               <div className="flex relative">
                   <p>{cartItem.price}</p>
               </div>
               {/* 传递购物车项的_id */}
               <p onClick={() => handleRemoveFromCart(user._id, cartItem._id)}>Remove item x</p>
           </div>
       </div>
   ))}
   

3. 后端确认匹配逻辑
   后端$pull操作保持匹配购物车项的_id即可，当前代码的$pull逻辑已经正确，只要前端传入的是购物车项自身的_id，就只会删除单个目标项。

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