React中如何用函数与useState实现递减并阻止负数显示

你的递减按钮失效核心是两处代码逻辑错误：

• 判断条件错误：cart.item是直接访问cart对象的item属性，但你的购物车以商品id作为对象键，应该用cart[item.id]获取对应商品的数量，同时要处理初始未添加商品时的undefined情况，改为(cart[item.id] || 0) > 0。
• 未限制最小值：即使做了前置判断，函数式更新时如果遇到状态异步更新的情况，仍可能出现负数，需要用Math.max确保最终数量不低于0。

修复后的代码（带前置判断） #

const [cart, setCart] = useState({});
const handleDeleteToCart = (item) => {
  const currentCount = cart[item.id] || 0;
  if (currentCount > 0) {
    setCart((pre) => ({ 
      ...pre, 
      [item.id]: Math.max((pre[item.id] || 0) - 1, 0) 
    }));
  }
};

简化版（无需前置判断） #

可以直接通过Math.max限制最小值，省略额外的if判断，逻辑更简洁：

const [cart, setCart] = useState({});
const handleDeleteToCart = (item) => {
  setCart((pre) => ({
    ...pre,
    [item.id]: Math.max((pre[item.id] || 0) - 1, 0)
  }));
};

内容的提问来源于stack exchange，提问作者Abd.al