ReactJS：如何在同一函数中修改并访问最新状态？

React的setState（包括useState返回的状态设置函数）是异步执行的，并且会在同一个事件循环中批量处理状态更新。这就导致你在调用setState(false)后立刻打印state时，状态还未完成更新，拿到的仍是当前函数闭包中的旧值。

以下是几种适配不同场景的解决方案：

1. 临时使用新值：直接存储到变量 #

如果只是需要在当前函数内临时使用这个新状态值，不需要依赖React的state变量，可以先将新值存入一个变量，之后同时用来更新状态和访问：

const CallMe = () => {
  const newState = false;
  setState(newState);
  console.log(newState); // 输出 false
};

2. 状态更新后执行逻辑：使用useEffect监听 #

如果需要在状态更新完成后执行后续逻辑（比如打印、调用其他函数），可以用useEffect钩子监听state的变化，当state更新时自动触发回调：

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

export default function App() {
  const [state, setState] = useState(true);

  const CallMe = () => {
    setState(false);
  };

  useEffect(() => {
    console.log(state); // state更新后会打印最新值
  }, [state]); // 仅当state变化时触发该回调

  return (
    <div className="App">
      <button onClick={CallMe}>CallMe</button>
    </div>
  );
}

3. 依赖旧状态计算新值：使用函数式更新 #

如果新状态需要基于旧状态计算，同时要在更新过程中访问新值，可以使用setState的函数式更新形式，在回调函数中处理新值：

const CallMe = () => {
  setState(prevState => {
    const newState = !prevState; // 基于旧状态计算新值
    console.log(newState); // 输出 false
    return newState;
  });
};

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