React购物车数量限制问题：无法限制最多添加5件商品

你的代码有两个核心问题导致数量限制不生效：

• 执行顺序颠倒：你先调用setNumber(number+1)更新数值，之后才做判断——这时候判断用的还是更新前的number值，就算触发return，数值已经被更新了，限制逻辑等于无效。
• 判断条件错误：应该检查当前number是否已经等于stock（5），而不是number > stock——当number是5时，再加就会超过库存，这时候就该阻止操作。

另外，handleNumberMin也需要加下限限制，避免数值变成负数。

下面是修复后的完整代码：

function ItemCount({}) {
    const stock = 5; // 固定值用const更合适
    const [number, setNumber] = useState(1);

    const handleNumberSum = () => {
        // 先判断当前数值是否小于库存，满足条件再更新
        if (number < stock) {
            setNumber(number + 1);
        }
    }

    const handleNumberMin = () => {
        // 限制最小值为1，防止出现负数
        if (number > 1) {
            setNumber(number - 1);
        }
    }

    const addToCart = () => {
        alert(`已添加 ${number} 件商品`)
    }

    return (
        <div className="d-grid gap-2 d-md-block">
            <button className="btn btn-primary resta" type="button" onClick={handleNumberMin}>-</button>
            {number}
            <button className="btn btn-primary suma" type="button" onClick={handleNumberSum}>+</button>
            <button className="btn btn-primary agregar" type="button" onClick={addToCart}>加入购物车</button>
        </div>
    )  
}

额外优化建议 #

如果遇到频繁点击按钮的场景，建议用函数式更新获取最新状态，避免依赖旧的number值出现异常：

const handleNumberSum = () => {
    setNumber(prevNumber => {
        return prevNumber < stock ? prevNumber + 1 : prevNumber;
    });
}

内容的提问来源于stack exchange，提问作者Maximiliano Rodriguez