简体   繁体   English

useContext 返回未定义的 nextjs

[英]useContext returns undefined nextjs

I'm using next.js and want to use useContext for global state.我正在使用 next.js 并希望将 useContext 用于全局 state。 I'm having trouble passing the value from provider to child element.我无法将值从提供者传递给子元素。 The returned value of language, in header.js, is undefined. header.js 中语言的返回值未定义。

langContext.js langContext.js

import { createContext } from 'react';

export const LangContext = createContext();

_app.js _app.js

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

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

header.js header.js

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

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

   return (
    <>
      {language}
    </>

According to React docs, Provider attribute should be value not language :根据 React 文档, Provider 属性应该是value而不是language

The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. Provider 组件接受要传递给作为此 Provider 后代的消费组件的 value prop。 One Provider can be connected to many consumers.一个提供者可以连接到多个消费者。 Providers can be nested to override values deeper within the tree.可以嵌套提供程序以覆盖树中更深的值。

Therefore, changing _app.js like so will do the job:因此,像这样更改 _app.js 就可以了:

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM