计数器超出可用库存、低于初始值，未遵循设定参数问题求助

核心问题点 #

• 状态更新函数的返回值误用：React中setCounter这类状态更新方法的返回值为undefined，你将setCounter(counter +1)的返回值赋值给newValue做判断，判断逻辑完全不生效。
• 未做判断先更新状态：两个函数都先调用了setCounter直接修改状态，后续判断完全拦不住这次提前执行的更新，直接导致数值超出边界。
• 语法与边界逻辑错误：普通JS逻辑中直接写{stock}属于语法错误，大括号包裹变量仅适用于JSX插值场景；addItem的边界判断未覆盖等于库存的情况，容易出现逻辑疏漏。

修复后代码 #

const addItem = () => {
    // 先计算预期值，确认合法后再更新状态
    const expectValue = counter + 1
    if (expectValue <= stock) {
        setCounter(expectValue)
    } else {
        alert("Stock is full")
        setCounter(stock)
    }
}

const quitItem = () => {
    const expectValue = counter - 1
    if (expectValue >= initial) {
        setCounter(expectValue)
    } else {
        setCounter(initial)
    }
}

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