React Context热重载异常：代码保存后抛出上下文使用范围错误

我在React中为部分页面配置了MyContextProvider，路由页面数组定义如下：

const pages = [
  {
    id: 1,
    name: 'Page 1',
    component: (
      <MyContextProvider>
        <Pag1 />
      </MyContextProvider>
    ),
  },
  {
    id: 2,
    name: 'Page 2',
    component: (
      <MyContextProvider>
        <Pag2 />
      </MyContextProvider>
    ),
  },
  {
    id: 3,
    name: 'Page 3',
    component: <Pag2 />,
  },
];

自定义Hook用于获取上下文：

const useMyContext = () => {
  const context = useContext(MyContext);

  if (!context) {
    throw new Error('useMyContext must be used within a MyContextProvider');
  }

  return context;
};

问题场景：首次打开页面一切正常，但在代码编辑器修改代码并保存触发热更新后，控制台会抛出'useMyContext must be used within a MyContextProvider'错误，刷新页面后恢复正常。

原因分析 #

热更新（HMR）过程中，React会尝试复用现有组件实例，但你直接在pages数组里提前渲染了带Provider的JSX（比如<MyContextProvider><Pag1 /></MyContextProvider>），相当于把组件实例硬编码进了全局常量数组。热更新时：

1. Provider组件会被重新编译生成新的组件引用，旧数组里的Provider实例还是旧的代码逻辑；
2. 页面组件（Pag1/Pag2）热更新后会读取新的MyContext引用，但旧Provider提供的是旧上下文，导致上下文匹配失败，返回null；
3. 全局pages数组不会在热更新时自动重新生成，旧组件实例和新代码逻辑冲突，触发Hook里的错误判断。

解决方法 #

1. 改用高阶组件包装（推荐） #

不要提前渲染Provider组件，而是用高阶组件包装页面组件，让路由在渲染时才创建Provider实例：

// 封装带Context Provider的高阶组件
const withMyContext = (Component) => {
  return (props) => (
    <MyContextProvider>
      <Component {...props} />
    </MyContextProvider>
  );
};

// 修改pages数组，存储组件引用或包装后的组件
const pages = [
  {
    id: 1,
    name: 'Page 1',
    component: withMyContext(Pag1),
  },
  {
    id: 2,
    name: 'Page 2',
    component: withMyContext(Pag2),
  },
  {
    id: 3,
    name: 'Page 3',
    component: Pag2,
  },
];

2. 让pages数组随热更新重新生成 #

如果必须保留现有结构，可以把pages数组放在组件内部定义，或者用useMemo包裹，确保热更新时数组重新生成，创建新的Provider实例：

// 在路由组件内部定义pages，确保热更新时重新生成
const RouterComponent = () => {
  const pages = useMemo(() => [
    {
      id: 1,
      name: 'Page 1',
      component: <MyContextProvider><Pag1 /></MyContextProvider>,
    },
    // ...其他页面
  ], []);

  // 渲染路由逻辑
  return <div>{/* 路由渲染代码 */}</div>;
};

3. 调整Hook错误判断（临时方案） #

如果不想修改结构，可以在开发环境下将错误改为警告，避免热更新时阻断页面，但不推荐长期使用：

const useMyContext = () => {
  const context = useContext(MyContext);

  if (!context && process.env.NODE_ENV === 'development') {
    console.warn('useMyContext must be used within a MyContextProvider');
  }

  return context;
};

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