useContext returns 在 _app.js 中未定义 (Next.js)

Question

使用 Next.js，我可以毫无问题地获取 header.js 文件中的上下文值，但 returns undefined 在 _app.js[=17= 中]

这是我的代码。

useLang.js

import { createContext, useContext, useState } from 'react'

const LangContext = createContext()

export const LangProvider = ({ children }) => {
  const [lang, setLang] = useState('en')
  const switchLang = (selected) => setLang(selected)

  return (
    <LangContext.Provider value={{ lang, switchLang }}>
      {children} 
    </LangContext.Provider>
  )
}

export const useLang = () => useContext(LangContext)

_app.js

import { LangProvider, useLang } from '../hooks/useLang'

export default function MyApp(props) {
  const { Component, pageProps } = props

  const contexts = useLang()
  console.log(contexts) // ------> undefined. why ???

  return (
    <LangProvider>
      <Component {...pageProps} />
    </LangProvider>
  )
}

header.js

import { useLang } from '../hooks/useLang'

export default function Header() {
  const { lang } = useLang() // ------> works fine here!

  return <> {lang} </>
}

我查看了 Next.js 文档，但没有任何地方提到您不能使用 _app.js 中的状态或上下文。任何帮助将不胜感激。

Answer 1

是的，您无法在 _app.js 上获取上下文的值，因为在顶部 _app.js 不能是 LangProvider 的子项。您只能在 LangProvider 容器的子组件上使用上下文的值。

useContext returns 在 _app.js 中未定义 (Next.js)

useContext returns undefined in _app.js (Next.js)

next.js

use-context