Next.js使用React Context Hook出现未声明错误如何解决

错误原因 #

• 你将dataContext的创建逻辑写在了MyApp组件内部，这既是局部变量外部文件无法访问，还会导致每次MyApp渲染都会生成新的Context实例，无法全局复用。
• LoginForm组件内没有引入dataContext的实例引用，自然会报变量未声明的错误，DevTools里能看到Context是因为Provider已经挂载，并不代表你的组件代码拿到了Context的引用。

解决步骤 #

1. 单独抽离Context定义到全局文件
   新建src/contexts/DataContext.js（路径可自行调整），代码如下：

import React from "react";
const DataContext = React.createContext();
export default DataContext;

注意：自定义Context遵循大驼峰命名规范，避免JSX识别异常

2. 修改_app.js引入Context实例

import React from "react";
import DataContext from "../contexts/DataContext"; // 替换为你自己的文件路径

function MyApp({ Component, pageProps }) {
  return (
    <DataContext.Provider value='just some text'>
      <Component {...pageProps} />
    </DataContext.Provider>
  )
}
export default MyApp

3. 修改loginForm.js引入Context再使用
   另外你代码里的handleSubmit看起来是React Hook Form的API，也要记得引入初始化，否则会继续报错：

import React from "react";
import DataContext from "../contexts/DataContext"; // 替换为你自己的文件路径
import { useForm } from "react-hook-form"; // 如果你没用这个库可以删掉对应逻辑

function LoginForm (props) {
  const { handleSubmit } = useForm();
  const info = React.useContext(DataContext)
  const onSubmit = () => console.log(info)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button type="submit">click here</button>
   </form>
  )
}
export default LoginForm;

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