React中useEffect是否在异步响应返回前触发导致初始值为undefined

开发者阿泽

2026-8-28

问题核心结论

空依赖数组的useEffect会在组件首次挂载完成后立刻触发，完全不会等待内部异步接口的响应返回，这就是你首次拿到undefined的直接原因。
你代码里setStateUserInfo(data.data.data)不会立刻执行：await会暂停getUserDetails的内部执行，直到axios接口响应成功后才会走到这行赋值。在接口等待的窗口期，stateUserInfo始终是初始值undefined，所以监听它的useEffect会先触发一次打印undefined，等接口返回、setState触发组件重渲染后，才会拿到正确数据。
你现在加if(stateUserInfo)判断的写法不是错，本质是做非空校验，但确实不是最优解，而且你当前的实现逻辑确实存在几个隐患。

当前实现的隐患

空依赖useEffect存在闭包陷阱：getUserDetails里用到了stateToken，如果组件挂载时Context里的token还没完成初始化（比如token存在本地存储，是Context初始化时异步读取的），你这里拿到的会是空token，直接导致接口鉴权失败。
没有处理加载态、错误态：接口请求过程中页面没有任何提示，用户不知道是在加载还是页面出了问题，一旦接口报错，页面会长期停留在无数据状态，没有任何反馈。
没有做组件卸载时的请求清理：如果接口还没返回用户就跳走离开了HomeScreen，请求完成后依然会调用setStateUserInfo，会触发React的内存泄漏警告。

更优雅的实现参考

把异步状态统一管理，在渲染层做状态分流，不要在effect里堆业务判断：

const {token, userInfo} = useContext(LoginContext)
const [stateUserInfo, setStateUserInfo] = userInfo
const [stateToken, setStateToken] = token
// 单独维护加载、错误状态，不要仅靠userInfo是否存在判断流程
const [loading, setLoading] = useState(false)
const [error, setError] = useState(null)

useEffect(() => {
  // token不存在时直接终止请求，避免带空参数调用接口
  if (!stateToken) return
  // 构造请求控制器，用来处理组件卸载时的请求取消
  const controller = new AbortController()
  const fetchUserDetails = async () => {
    try {
      setLoading(true)
      setError(null)
      const { data } = await axios.get(
        `${apiValidate}&JWT=${stateToken}`,
        { signal: controller.signal }
      )
      setStateUserInfo(data.data.data)
    } catch (err) {
      // 过滤主动取消请求触发的错误，不需要给用户提示
      if (!axios.isCancel(err)) {
        setError(err)
      }
    } finally {
      setLoading(false)
    }
  }
  fetchUserDetails()
  // 组件卸载时取消未完成的请求，避免内存泄漏
  return () => controller.abort()
}, [stateToken, setStateUserInfo]) // 把token加入依赖，token更新时自动重新拉取用户信息

// 渲染层直接按状态分流，不需要在effect里加非空判断写业务逻辑
if (loading) return <div>用户信息加载中...</div>
if (error) return <div>用户信息加载失败，请刷新重试</div>
// 走到这里的时候stateUserInfo一定是有值的，后续业务逻辑不需要再写非空判断
return (
  <div className="home-page">
    {/* 正常的HomeScreen业务代码，直接用stateUserInfo即可 */}
  </div>
)

这种写法的优势很明显：

异步请求的三种状态（加载中、失败、成功）都做了显式处理，用户全程有明确反馈
从根源上避免了闭包拿旧token、空token的问题，token更新时会自动重新拉取最新的用户信息
解决了组件卸载后更新状态的内存泄漏问题
不需要在各个监听userInfo的effect里重复写非空判断，渲染层已经做了状态拦截，后续所有业务逻辑里都可以默认拿到有效的userInfo值，代码更干净。

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