useContext 返回未定义的 nextjs答案

【问题标题】：useContext returns undefined nextjsuseContext 返回未定义的 nextjs
【发布时间】：2020-12-16 18:34:44
【问题描述】：

我正在使用 next.js 并希望将 useContext 用于全局状态。我无法将值从提供者传递到子元素。在 header.js 中语言的返回值是未定义的。

langContext.js

import { createContext } from 'react';

export const LangContext = createContext();

_app.js

import { LangContext } from '../components/langContext'

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <LangContext.Provider language="test">
        <Component {...pageProps} />
      </LangContext.Provider>
    </>
  );
};

header.js

import { LangContext } from "../components/langContext"

const Header = () => {
  const language = useContext(LangContext);

   return (
    <>
      {language}
    </>

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

根据 React 文档，Provider 属性应该是 value 而不是 language：

Provider 组件接受一个 value prop 传递给消费作为此 Provider 的后代的组件。一个提供商可以是连接到很多消费者。提供者可以嵌套覆盖树中更深的值。

因此，像这样更改 _app.js 即可：

import { LangContext } from '../components/langContext'

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <LangContext.Provider value="test">
        <Component {...pageProps} />
      </LangContext.Provider>
    </>
  );
}

【讨论】：