React购物车增减商品数量：如何让递减操作停留在0？

要修复递减操作导致商品数量变为负数的问题，只需在removeToCart函数中添加下限判断，确保数量不会低于0。可以通过Math.max()方法实现这一点——将减1后的数值与0对比，取两者中的较大值。

修改后的代码如下：

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

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

说明 #

• Math.max(prev[productId] - 1, 0)会先计算prev[productId] - 1，如果结果小于0，就返回0；否则返回计算后的数值，彻底避免了负数情况。
• 按钮调用代码无需修改，保持原有逻辑即可：

<button
    className="add-btn mx-2"
    onClick={() => {
        addToCart(product.id);
    }}
>
    +
</button>
<button
    className="add-btn mx-2"
    onClick={() => {
        removeToCart(product.id);
    }}
>
    -
</button>

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