为何在useEffect异步函数中setState后无法立即获取当前状态且请求延迟？

React 的 setState 是异步批量更新机制，这就是你遇到延迟问题的核心原因：调用 setPlayer 后立刻访问 player 状态，拿到的还是更新前的旧值，导致请求用了错误参数，控制台也看不到最新值。

修正方案 #

直接使用计算好的新值发起请求，不要依赖还未更新的状态变量：

修正后的代码 #

React.useEffect(() => {
    console.log("useEffect");

    const getToken = async () => {
        console.log(formattedPlayer);
        // 先把要用到的最终值存到变量里
        const newPlayer = formattedPlayer + "01";
        // 直接打印这个变量，能立刻看到最新值
        console.log(newPlayer);
        // 更新状态
        setPlayer(newPlayer);
        
        // 请求时用newPlayer，而非还未更新的player状态
        const result = await bbstats.getPlayerStats(
            newPlayer,
            "totals"
        );
      
        // 处理返回的数据
    }

    getToken();     

}, [props.player]);

原代码问题解析 #

• setPlayer 不会立即修改 player 状态，React 会把所有状态更新操作加入队列，等当前函数执行完毕、渲染周期结束后才批量处理更新。
• 因此你在 setPlayer 后立刻 console.log(player)，拿到的是更新前的旧值，请求也用了这个旧值；直到下一次 props.player 变化触发 useEffect 时，上一次的状态才更新完成，这就出现了“延迟一次”的现象。

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