React组件使用useContext钩子报错：Cannot access 'Child1' before initialization

这个报错核心是组件初始化顺序和Context的引用顺序冲突，要么是子组件在Context还没创建好就调用了useContext，要么是存在循环依赖导致加载顺序乱了。下面是具体解决办法：

1. 单独抽离Context到独立文件 #

这是最稳妥的方案，彻底避免顺序问题。比如新建ParentContext.js：

import { createContext, useContext } from 'react';

// 先创建Context并导出
const ParentContext = createContext(null);
// 封装自定义Hook，方便子组件调用
export const useParentContext = () => useContext(ParentContext);

export default ParentContext;

之后Parent组件、Spawner、所有子组件都从这个文件导入Context和自定义Hook，不管文件加载顺序如何，Context都是提前初始化好的。

2. 调整同文件内的代码顺序 #

如果所有组件都放在同一个文件里，必须严格遵循先定义Context，再定义子组件，最后定义Parent和Spawner的顺序：

import { createContext, useContext, useState } from 'react';

// 第一步：创建Context
const ParentContext = createContext(null);

// 第二步：定义所有子组件
const Child1 = () => {
  const { someProp } = useContext(ParentContext);
  return <div>Child1: {someProp}</div>;
};

const Child2 = () => {
  const { someProp } = useContext(ParentContext);
  return <div>Child2: {someProp}</div>;
};

// 第三步：定义Spawner
const Spawner = ({ condition }) => {
  return condition ? <Child1 /> : <Child2 />;
};

// 第四步：定义Parent组件
const Parent = () => {
  const [someProp, setSomeProp] = useState('来自Parent的属性');
  return (
    <ParentContext.Provider value={{ someProp }}>
      <Spawner condition={true} />
    </ParentContext.Provider>
  );
};

这样子组件在调用useContext时，Context已经完成初始化，不会触发报错。

3. 排查并解决循环依赖 #

如果组件分散在不同文件，检查是否存在循环导入：比如Parent导入Spawner，Spawner导入Child1，Child1又导入Parent（或者间接导入Parent相关模块）。这种情况要拆分模块，比如把Spawner和子组件的依赖链简化，避免循环引用。

4. 子组件内添加兜底判断（临时方案） #

如果暂时没法调整结构，可以在子组件里先判断Context是否存在，避免报错：

const Child1 = () => {
  const context = useContext(ParentContext);
  // 当Context未初始化时，返回空或者加载状态
  if (!context) return <div>加载中...</div>;
  
  const { someProp } = context;
  return <div>Child1: {someProp}</div>;
};

但这只是临时兜底，建议优先用前面两种方案从根源解决问题。

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