未声明上下文错误使用上下文挂钩与 next.js 反应

Question

只是在这个带有钩子的基本实现方面寻求一些帮助。 我目前正在使用 Next.js 并希望在 _app.js 文件中设置一个上下文，以使其可用于整个组件树。

import React from "react";

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

然后在 index.js 中，添加组件 loginForm.js，代码如下：

import React from "react";

function LoginForm (props) {

  const info = React.useContext(dataContext)
  const onSubmit = () => console.log(info)

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

现在在控制台中，我收到一条错误消息“未声明 dataContext”

• 显然，上下文存在 -

这太简单了，我什至不知道如何解决这个问题，任何帮助将不胜感激。

Answer 1

将React.createContext()组件外：

import React from "react";

const DataContext = React.createContext();

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

export default MyApp;

Answer 2

index.js 中的 dataContext 是什么？

 const info = React.useContext(dataContext)

我想你忘了导入上下文

Answer 3

让 d = useMyContextHook() const draw = d? d.draw：null

这为我解决了