异步函数内useState状态变量无法立即更新赋值如何解决

React 对状态更新做异步批处理，调用状态设置方法（比如setAddresses）时，不会同步修改当前函数闭包内的状态值，当前执行上下文中读取到的状态始终是调用set方法前的旧值，状态更新只会在下一次组件重渲染后生效。
你代码里await fetchAddresses拿到的本地变量addresses本身就是最新值，和后续状态更新后的值完全一致，不需要等状态赋值完成再取数据。

• 方法1：直接使用接口返回的本地变量执行后续操作
  这是最简洁、性能最好的方案，状态本身的作用是驱动视图更新，纯业务逻辑操作不需要等状态落位，直接用请求拿到的原始数据处理即可，注意避免本地变量和状态变量重名导致的混淆：

  const [addresses,setAddresses] = useState<any[]>([]);
  
  const fetchData = async () =>{
    try{
      const fetchedAddresses = await fetchAddresses(data);
      // 直接用拿到的最新数据执行业务操作
      console.log(fetchedAddresses)
      // 操作数据的相关逻辑直接写在这里，入参用fetchedAddresses
      
      // 业务逻辑处理完成后，再把数据存入状态供视图渲染使用
      setAddresses(fetchedAddresses);
    } 
    catch(err){
      console.log(err);
    }
  }
  
  useEffect(()=>{
    if(emptyArray){
      fetchData();
    }
  },[]);
  

• 方法2：通过useEffect监听状态变化，在状态更新完成后执行依赖状态的逻辑
  如果你的后续操作必须依赖状态更新后的上下文（比如要和其他状态做联动、逻辑写在其他闭包里拿不到请求返回的本地变量），可以把对应逻辑放到监听该状态的副作用里执行：

  const [addresses,setAddresses] = useState<any[]>([]);
  
  const fetchData = async () =>{
    try{
      const fetchedAddresses = await fetchAddresses(data);
      setAddresses(fetchedAddresses);
    } 
    catch(err){
      console.log(err);
    }
  }
  
  // 监听addresses变化，状态更新完成、组件重渲染后触发逻辑
  useEffect(()=>{
    // 可根据业务需求加判断，跳过初始空值场景
    if (addresses.length) {
      console.log(addresses)
      // 操作addresses状态的相关代码写在这里
    }
  }, [addresses])
  
  useEffect(()=>{
    if(emptyArray){
      fetchData();
    }
  },[]);
  

注意：非必要不要使用flushSync强行把状态更新改成同步，这种方式会打断React的批处理优化，容易引发不必要的重渲染、页面抖动问题，绝大多数场景下前两种方案完全可以满足需求。

内容的提问来源于stack exchange，提问作者piña