React中setState更新后在另一函数取值未生效问题咨询

• 核心原因是闭包捕获了旧渲染周期的状态值：
  React组件每触发一次渲染，都会生成独立的函数作用域。你触发按钮点击调用callFun时，这个函数属于当前这次渲染的闭包，内部setTimeout回调里引用的num，会固定绑定当前渲染周期里的num值，不会跟着后续状态更新变化。
• 如果你初始化num状态时没有赋值默认值，当前渲染周期的num本身就是undefined，哪怕setNum触发重渲染后新的状态值是25，这个闭包里的num也还是初始的undefined，所以打印结果符合预期。
• 补充验证：你可以在组件顶层加一行打印console.log('组件渲染，当前num值：', num)，点击按钮后你会看到组件会在setNum调用后立刻重渲染，重渲染的日志里num已经是25，只是之前触发的setTimeout回调拿不到新渲染周期的状态而已。

如果需要在异步逻辑里拿到最新的状态值，可以选择两种方案：

1. 用useRef同步保存状态值，修改状态的同时更新ref的值，异步逻辑直接读ref.current即可：

// 声明时同步状态和ref
const [num, setNum] = useState(0)
const numRef = useRef(num)
// 状态更新时同步更新ref
useEffect(() => {
  numRef.current = num
}, [num])

// 异步逻辑读ref
setTimeout(() => {
  console.log("callfun", numRef.current);
  alert(numRef.current);
},1000);

2. 把依赖最新状态的逻辑放到useEffect中，监听num变化触发执行，自然能拿到最新的状态值。

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