React开发Windows10计算器时useState变量首次点击不更新问题

问题根因 #

React的useState状态更新是批量异步执行的，在同一个事件回调函数内调用setXxx更新状态后，当前作用域内的状态变量还是本次渲染时的旧值，要等回调执行完成后才会触发重新渲染，拿到更新后的状态值。

你当前代码中刚调用setAMath/setBMath后，立刻读取aMath/bMath拼接calcShow、打印日志，拿到的都是更新前的初始空值，所以看起来状态没有更新；多次点击时读取的是上一次渲染更新后的值，才会表现为"多次点击才生效"。

修复方案 #

不要依赖刚执行完setState后的状态变量，直接用当前回调内已经拿到的有效值计算后续逻辑，示例修改代码如下：

else if(symbol === '+'){
    // 先把要更新的值存在临时变量，避免读旧state
    const updatedAMath = aMath === '' ? currentValue : aMath
    const updatedBMath = aMath === '' ? bMath : currentValue

    if(aMath === ''){
        setAMath(updatedAMath)
    } else {
        setBMath(updatedBMath)
    }
    // 直接用临时变量计算展示值，无需等待state更新
    setCalcShow(updatedAMath + symbol + updatedBMath)
    setNewValue(true)
    // 打印临时变量即可拿到最新值
    console.log({a: updatedAMath,b: updatedBMath,currentValue})
    setSymbolMath(symbol)
}

额外优化建议 #

• 如果后续逻辑需要依赖更新后的aMath/bMath执行，可以通过useEffect监听这两个状态的变化，回调内会拿到最新值：

useEffect(() => {
    // 此处可写依赖最新aMath、bMath的逻辑
}, [aMath, bMath])

• 如果需要基于上一次的状态计算新状态，建议使用setState的函数式更新写法，避免闭包陷阱：比如setAMath(prev => prev + currentValue)

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