useContext 返回未定义的 nextjs

Question

我正在使用 next.js 并希望将 useContext 用于全局 state。 我无法将值从提供者传递给子元素。 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}
    </>

Answer 1

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

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

因此，像这样更改 _app.js 就可以了：

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

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