React调用setState更新布尔类型状态变量出现更新滞后问题

你的问题由三个常见的React使用错误共同导致：

• 点击事件绑定错误：当前按钮的onClick回调写法为() => toggleDrawing，仅返回了toggleDrawing函数的引用，没有实际执行该函数，首次点击时根本不会触发状态更新逻辑。
• React状态更新的异步特性：即使修正了事件绑定，如果你在调用setDrawing之后立即同步打印drawing，拿到的依然是本次渲染的旧值。React的状态更新是批量异步处理的，会等到当前事件循环任务全部执行完成后才触发重渲染，新的状态值只能在下一次渲染时获取。
• 状态切换逻辑错误：你当前的toggleDrawing逻辑仅支持将drawing设为true，无法实现切换效果，也会和你的预期行为不符。

按以下步骤修正代码即可：

1. 修正按钮点击事件绑定，两种写法二选一：
   直接传入函数引用：

   <button onClick={toggleDrawing}>Toggle Drawing</button>
   

   或者在箭头函数内主动执行：

   <button onClick={() => toggleDrawing()}>Toggle Drawing</button>
   

2. 修正toggleDrawing的状态切换逻辑，使用函数式更新保证拿到最新的状态快照，避免批量更新导致的取值异常：

   const toggleDrawing = () => {
     setDrawing(prevState => !prevState)
   }
   

3. 若需要监听drawing的状态变化，将打印逻辑放到useEffect钩子中，依赖项设置为drawing即可拿到最新值：

   import { useState, useEffect } from 'react'
   
   // ...其他业务代码
   useEffect(() => {
     console.log(drawing) // 状态更新后自动打印最新值
   }, [drawing])
   

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