React/JS：如何实现数字减少至1时停止的内置条件逻辑

嘿，这个需求很常见，咱们可以把代码优化得更简洁，同时保证逻辑严谨还能提升用户体验～你的思路方向是对的，但不用重复写两个几乎一样的<Button>组件，这里有两种实用方案：

方案1：点击时判断是否执行减少操作 #

直接在点击回调里加入条件判断，只有当数量大于1时才触发减少逻辑，代码更紧凑：

<Button 
  type="button" 
  size="small" 
  onClick={() => {
    if (item.quantity > 1) {
      handleUpdateCartQty(item.id, item.quantity - 1);
    }
  }}
>
  -
</Button>

方案2：数量为1时禁用按钮（更推荐） #

这种方式交互更直观，用户一眼就能看出按钮不可点击，避免无效操作，体验更好：

<Button 
  type="button" 
  size="small" 
  disabled={item.quantity === 1} // 当数量等于1时禁用按钮
  onClick={() => handleUpdateCartQty(item.id, item.quantity - 1)}
>
  -
</Button>

额外保障：逻辑层添加校验 #

为了避免通过其他途径（比如控制台手动调用、API异常返回等）导致数量变成0或负数，建议在handleUpdateCartQty函数内部也加上一层校验，确保数量始终不低于1：

const handleUpdateCartQty = (id, newQty) => {
  // 强制将数量限制在1及以上
  const validQuantity = Math.max(newQty, 1);
  // 后续执行更新购物车的逻辑（比如更新state、调用后端接口）
  updateCartItem(id, validQuantity);
};

这样UI层和逻辑层双重保障，就能完美实现你要的“数字为1时停止减少”的需求啦～

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