在Astro中使用React Context最简示例报错：testValue为undefined

我搭了个Astro+React Context的最简示例，代码如下，但运行时一直报Cannot destructure property 'testValue' of '__vite_ssr_import_1__.useTestContext(...)' as it is undefined错误：

Context定义 #

// TestContext.jsx
import { createContext, useContext, useState } from "react";

const TestContext = createContext();

export const useTestContext = () => useContext(TestContext);

export const TestProvider = ({ children }) => {
  const [testValue, setTestValue] = useState(0);

  const changeValue = () => {
    setTestValue(testValue + 1);
  };

  return (
    <TestContext.Provider value={{ testValue, changeValue }}>
      {children}
    </TestContext.Provider>
  );
};

Astro布局文件 #

// Layout.astro
import { TestProvider } from "../components/TestContext.jsx";
import Hello from "../components/Hello.jsx";

<TestProvider>
    <Hello client:load />
</TestProvider>

子组件 #

// Hello.jsx
import { useTestContext } from "./TestContext";

export default function Hello() {
  const { testValue, changeValue } = useTestContext();

  return (
    <div>
      <h1>Hello</h1>
      <p>Test Value: {testValue}</p>
      <button onClick={changeValue}>Change Value</button>
    </div>
  );
}

问题根因 #

Astro的.astro文件是服务端渲染模板，在服务端执行阶段，直接在Astro模板里嵌套React的TestProvider和Hello组件时，Astro并不会把这些React组件当成完整的React组件树来处理——服务端渲染Hello组件时，TestProvider还没真正建立起Context的作用域，导致useTestContext()返回undefined，解构自然报错。另外创建TestContext时没传默认值，也会放大这个问题。

解决办法 #

方法1：把Provider和子组件打包成一个React客户端组件

不要在Astro布局里直接混用Provider和子组件，而是创建一个独立的React组件来包裹整个Context作用域：

1. 新建ContextWrapper.jsx：

// ContextWrapper.jsx
import { TestProvider } from "./TestContext";
import Hello from "./Hello";

export default function ContextWrapper() {
  return (
    <TestProvider>
      <Hello />
    </TestProvider>
  );
}

2. 修改Layout.astro，只导入这个完整的React组件：

// Layout.astro
import ContextWrapper from "../components/ContextWrapper.jsx";

<ContextWrapper client:load />

这样整个React组件树（包括Provider）会在客户端被完整初始化，Hello组件就能正常获取到Context的值了。

方法2：给Context设置默认值（兜底用）

在创建Context时传入默认值，避免因意外未包裹Provider直接报错，这个方法只能做兜底，不能替代方法1：

// TestContext.jsx
const TestContext = createContext({
  testValue: 0,
  changeValue: () => {} // 空函数当默认值，避免调用时报错
});

验证 #

改完后重启Astro项目，点击按钮就能正常更新testValue，不会再出现解构错误了。

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