React如何让App.js的useEffect在子组件渲染前执行获取认证用户

首先明确核心原因：useEffect的默认执行时机是组件挂载完成（所有子组件也渲染到DOM）后才触发，加上API调用本身是异步操作，无论怎么调整请求触发时机，首次渲染时都不可能拿到异步返回的用户数据，必须通过加载状态控制子组件的渲染时机，才能保证子组件渲染时依赖的用户状态已经存在。

方案1：加加载状态拦截渲染（最推荐） #

在你的Redux用户状态模块中新增loading、error两个状态，分别对应接口请求中和请求失败的状态，在请求发起时设置loading: true，请求成功/失败后设置loading: false并更新对应数据或错误信息。
App.js代码调整如下：

import { useSelector, useDispatch } from 'react-redux';
import { useEffect } from 'react';
// 引入你的子组件
import Home from './pages/Home';

function App() {
  const dispatch = useDispatch();
  // 从Redux中取出认证相关状态
  const { userInfo, loading, error } = useSelector(state => state.auth);

  useEffect(() => {
    dispatch(getAuthenticatedUser());
  }, [dispatch]);

  // 请求中时渲染加载提示，不渲染子组件
  if (loading) return <div>加载中，请稍候</div>;
  // 请求失败时渲染错误提示
  if (error) return <div>用户信息获取失败，请刷新页面重试</div>;

  // 数据加载完成后再渲染子组件，此时子组件可以拿到完整的userInfo
  return (
    <div className="App">
      <Home />
    </div>
  );
}

这个方案是前端开发的通用最佳实践，兼容性强，还能覆盖加载、错误的边界场景，避免子组件出现 undefined 报错。

方案2：提前请求触发时机（仅请求发送更早，仍需搭配加载状态） #

如果你希望请求尽可能早发送，可以通过useRef标记请求状态，在组件顶层（return语句之前）触发请求，只会执行一次：

import { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';

function App() {
  const dispatch = useDispatch();
  const { userInfo, loading, error } = useSelector(state => state.auth);
  // 用ref标记是否已经发起过请求，避免重复执行
  const hasFetchUser = useRef(false);

  if (!hasFetchUser.current) {
    dispatch(getAuthenticatedUser());
    hasFetchUser.current = true;
  }

  if (loading) return <div>加载中，请稍候</div>;
  if (error) return <div>用户信息获取失败，请刷新页面重试</div>;

  return <Home />;
}

注意：不要尝试用useLayoutEffect替代useEffect解决问题，useLayoutEffect的执行时机仍然在子组件首次渲染之后，无法满足要求

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