React中调用set后立即读取useState值返回undefined如何解决

React的useState返回的更新函数是异步批量执行的，调用setGlobalVariable(test)后，并不会立刻修改当前作用域下的globalVariable变量：

当前useEffect的闭包绑定的是首次渲染时的globalVariable值，你没有给useState设置初始值，所以初始值为undefined，本次渲染周期内这个值不会变化，更新后的值要到下一次组件重渲染时才能拿到。

你可以根据使用场景选择以下方案：

方案1：直接使用待更新的新值 #

如果你要在setGlobalVariable之后立即使用新值，直接读取你准备设置的变量即可，不需要从state里读：

useEffect(()=>{
  const test = 5
  console.log(test) // 5
  setGlobalVariable(test)
  // 后续逻辑直接用test变量，不用读globalVariable
  console.log(test) // 5
},[]);

方案2：监听state变化执行后续逻辑 #

如果你需要在state确实更新完成后执行对应逻辑，新增一个依赖globalVariable的useEffect即可：

import React, { useEffect, useState } from 'react';

function App(){
  const [globalVariable, setGlobalVariable] = useState();

  useEffect(()=>{
    const test = 5
    setGlobalVariable(test)
  },[]);

  // 新增这个effect，globalVariable变化后会触发，拿到的是最新值
  useEffect(()=>{
    // 避免初始值为undefined时执行逻辑可以加个判断
    if(globalVariable !== undefined){
      console.log(globalVariable) // 5
    }
  },[globalVariable]);

  return (
    <div>
    </div>
  );
}

export default App;

方案3：用useRef保存可变值（可选） #

如果你不需要这个变量触发组件重渲染，只是需要跨渲染周期保存可变值，也可以用useRef代替useState，更新后可以立刻读取到最新值：

import React, { useEffect, useRef } from 'react';

function App(){
  const globalVariable = useRef();

  useEffect(()=>{
    const test = 5
    globalVariable.current = test
    console.log(globalVariable.current) // 5
  },[]);

  return (
    <div>
    </div>
  );
}

export default App;

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