为何React函数组件中更新后的state变量无法在浏览器控制台显示？

我知道useState返回的更新方法是异步的，但运行以下代码时，即便将console.log延迟最多5秒，控制台仍打印state变量的旧值1，而非更新后的值2。在React开发者工具中可看到点击按钮后state已变化，好奇为何延迟后仍输出过时值？类组件的setState无此问题，但函数组件的useState存在该情况。

import "./App.css";
import React, { useState } from "react";

function App() {
  const [variable, setVariable] = useState(1);

  const handleClick = () => {
    setVariable(2);
    setTimeout(() => {
      console.log(variable);
    }, 2000);
  };

  return <button onClick={handleClick}>Button</button>;
}

export default App;

核心原因：闭包捕获的是当前渲染周期的state快照 #

函数组件的每次渲染都是一个独立的函数调用，每个调用里的variable都是该渲染周期的固定快照。你的handleClick函数是在初始渲染（此时variable=1）时创建的，里面的setTimeout回调会捕获这个初始的variable值。

当你调用setVariable(2)后，React会触发新的渲染，生成新的variable=2和新的handleClick函数，但旧的handleClick里的setTimeout回调仍然持有初始渲染时的variable快照，所以延迟后打印的还是旧值1。

类组件无此问题的原因 #

类组件中，this.state是一个可变的对象，setTimeout回调里访问this.state.variable时，会直接读取当前this指向的最新state对象，因此能拿到更新后的值。

解决方法 #

方法1：用useRef保存最新值

useRef的current属性是可变的，不会被闭包捕获为固定快照，始终能拿到最新值：

import "./App.css";
import React, { useState, useRef } from "react";

function App() {
  const [variable, setVariable] = useState(1);
  const variableRef = useRef(variable);

  // 同步ref与state的最新值
  variableRef.current = variable;

  const handleClick = () => {
    setVariable(2);
    setTimeout(() => {
      console.log(variableRef.current); // 输出2
    }, 2000);
  };

  return <button onClick={handleClick}>Button</button>;
}

export default App;

方法2：用useEffect监听state变化

如果只需要在state更新时执行逻辑，可以通过useEffect监听variable，触发时执行打印：

import "./App.css";
import React, { useState, useEffect } from "react";

function App() {
  const [variable, setVariable] = useState(1);

  useEffect(() => {
    console.log(variable); // 初始打印1，更新后打印2
  }, [variable]);

  const handleClick = () => {
    setVariable(2);
  };

  return <button onClick={handleClick}>Button</button>;
}

export default App;

方法3：函数式更新（适用于需要基于旧值更新的场景）

如果需要在setVariable后立刻获取更新逻辑，可以用函数式更新，但对于延迟打印场景，前两种方法更直接：

const handleClick = () => {
  setVariable(prev => {
    const newValue = 2;
    setTimeout(() => {
      console.log(newValue); // 输出2
    }, 2000);
    return newValue;
  });
};

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