React Hooks中更新状态后如何获取最新值？

你遇到的问题核心是函数组件的state是闭包捕获的，加上React的批量异步更新机制，在同一个事件循环里，更新state后直接访问变量拿到的还是旧值。下面给你几种可行的方法，不止useEffect一种：

1. useEffect（最常用的标准方案） #

这是React官方推荐的监听state变化的方式，当name更新完成后，useEffect的回调会触发，此时能拿到最新的state值：

const [name, setName] = useState('jimothy');

useEffect(() => {
  console.log('最新的name:', name);
  consoleName();
}, [name]); // 依赖数组里放name，只有name变化时才执行

function handleClick() {
  setName('timothy');
}

function consoleName() {
  console.log(name);
}

2. 在setState的函数式更新中直接使用新值 #

如果你的操作只需要基于刚更新的新值执行，不需要等待组件渲染，可以直接在setName的函数参数里处理：

function handleClick() {
  setName(prevName => {
    const newName = 'timothy';
    // 这里可以直接用newName，它就是最新值
    console.log(newName);
    console.log('旧值:', prevName);
    return newName;
  });
}

这种方式适合不需要依赖组件渲染结果，只需要在更新逻辑里使用新值的场景。

3. 使用useRef保存最新状态 #

用ref来同步state的最新值，因为ref的current属性是可变的，不会被闭包捕获，任何时候访问都能拿到最新值：

const [name, setName] = useState('jimothy');
const nameRef = useRef(name);

// 每次name更新时同步ref
useEffect(() => {
  nameRef.current = name;
}, [name]);

function handleClick() {
  setName('timothy');
  // 若要立即获取，需放在异步任务中（比如setTimeout），等待批量更新完成
  setTimeout(() => {
    console.log('最新name:', nameRef.current);
  }, 0);
}

这种方式适合需要在非渲染逻辑（比如定时器、事件回调）里随时获取最新state的场景。

关于类组件的误区 #

你觉得类组件的setState更简单，其实类组件的setState同样是异步批量更新的——直接在setState后访问this.state也拿不到最新值，必须用setState的第二个回调或者componentDidUpdate生命周期：

// 类组件写法
this.setState({ name: 'timothy' }, () => {
  // 这里才能拿到最新的this.state.name
  console.log(this.state.name);
});

本质上和Hooks的useEffect逻辑一致，只是写法不同而已。

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