如何访问async await useEffect内部赋值的state变量的外部值

根本原因 #

React的状态更新是异步批量执行的，调用setEmailOwner后不会立刻修改当前渲染闭包下的emailOwner变量，需要等待下一次组件重渲染，才能拿到更新后的状态值。

常见场景及解决方法 #

• 首次渲染时访问值为空
  你当前useEffect的依赖是空数组，只会在组件首次挂载完成后执行，且接口请求本身是异步操作，因此组件第一次渲染时emailOwner始终是初始空字符串，直到接口返回触发状态更新、组件重渲染后才会拿到正确值。
  解决方式：渲染时做好兜底兼容，示例代码：

  return (
    <div>
      {/* 有值才渲染对应内容，否则展示加载态 */}
      {emailOwner ? <p>邮箱所有者：{emailOwner}</p> : <p>加载中...</p>}
    </div>
  )
  

• 在setEmailOwner调用后立刻访问拿不到最新值
  同一渲染周期内的闭包变量不会被状态更新修改，你调用setEmailOwner(res.data)后，当前函数上下文里的emailOwner还是本次渲染的旧值。
  解决方式：如果更新后立刻要用到该值，直接使用res.data即可，无需读状态变量。
• 其他自定义函数里访问到旧值
  如果函数是在状态更新前创建的，默认会绑定当时的闭包变量，拿到的就是旧值。
  解决方式：把依赖emailOwner的逻辑放到单独的useEffect中，将emailOwner加入依赖数组，状态更新后会自动触发执行拿到最新值，示例代码：

  useEffect(() => {
    // 排除初始空值的情况
    if (!emailOwner) return
    // 这里写需要用到最新emailOwner的业务逻辑
    console.log('最新的邮箱所有者：', emailOwner)
  }, [emailOwner])
  

额外排查点 #

你当前给emailOwner设置的初始值是空字符串，可打印typeof res.data确认接口返回值是否为字符串类型，如果返回的是对象，需要对应修改初始值为{}，避免后续使用时报错。

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