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>
    </>
  );
}