React上下文未创建前触发预取数据实现加载页的问题求助

核心结论 #

不可能不渲染上下文组件就触发内部的useEffect。React的useEffect属于组件挂载后的生命周期钩子，只有组件完成渲染（挂载到DOM），内部的钩子才会执行。你当前的代码逻辑陷入了死循环：因为上下文组件没被渲染，useEffect无法发起请求更新loading状态，而loading一直为true又导致上下文组件永远不被渲染。

同时你的原代码还存在一个基础错误：useAuthContext()和useProfileContext()必须在对应的上下文提供者（<AuthContextComponent>、<ProfileContextComponent>）的后代组件中调用，否则会直接抛出“找不到上下文”的错误。

正确实现方案 #

调整组件结构，先渲染所有上下文提供者，再在它们的后代组件中判断loading状态，决定显示加载界面还是业务内容。

代码示例

// 主上下文组件：先渲染所有上下文提供者
export const AppContextComponent: React.FC<Props> = ({ children }) => {
  return (
    <AuthContextComponent>
      <ProfileContextComponent>
        {/* 单独的加载判断组件，作为上下文的后代获取状态 */}
        <AppLoader>{children}</AppLoader>
      </ProfileContextComponent>
    </AuthContextComponent>
  );
};

// 负责判断加载状态的子组件
const AppLoader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { loading: authLoading } = useAuthContext();
  const { loading: profileLoading } = useProfileContext();

  // 任意一个上下文处于加载状态时显示加载界面
  if (authLoading || profileLoading) {
    return <div>Loading...</div>;
  }

  // 所有加载完成后渲染业务内容
  return <>{children}</>;
};

进阶优化（可选） #

如果两个请求存在依赖关系（比如必须先完成身份验证，才能请求用户资料），可以分阶段渲染上下文并显示针对性的加载提示：

export const AppContextComponent: React.FC<Props> = ({ children }) => {
  return (
    <AuthContextComponent>
      <AuthLoader>
        {/* 身份验证完成后再渲染资料上下文 */}
        <ProfileContextComponent>
          <ProfileLoader>{children}</ProfileLoader>
        </ProfileContextComponent>
      </AuthLoader>
    </AuthContextComponent>
  );
};

const AuthLoader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { loading: authLoading } = useAuthContext();
  if (authLoading) return <div>正在验证身份...</div>;
  return <>{children}</>;
};

const ProfileLoader: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { loading: profileLoading } = useProfileContext();
  if (profileLoading) return <div>正在加载个人资料...</div>;
  return <>{children}</>;
};

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