reactjs - React 上下文提供程序未设置值

Question

我正在尝试开始使用 React 上下文 Hook ，但我似乎遇到了一个我不明白的问题。

我已经定义了一个用户上下文，它只是一个表示“hello user”的字符串:

import { useContext, createContext } from "react"

export const UserContext = createContext<string | null>(null)

export interface IAuth {
  children: React.ReactNode;
}

const Auth: React.FC<IAuth> = (props) => {

  return(
    <UserContext.Provider value={"hello user"}>
      {props.children}
    </UserContext.Provider>
  )
}

export default Auth

然后我尝试访问是这样的:

const Dash: NextPage<dashPageProps> = (props) => {

  const contextMsg = useContext(UserContext)

  const submitForm = () => {
    console.log("logout")
  }

  return (
    <Auth>
    <div className="w-screen">
      <div className='text-xl'>
        Dashboard
      </div>
      <h1>{contextMsg}</h1>
      <button className='bg-gray-400 border-2 border-gray-600 w-fit mt-5' onClick={submitForm} >Log out</button>
    </div>
    </Auth>
  )
}

export default Dash

但即使我在使用 UserContext.Provider 时设置了一个值，也没有打印出任何内容。如果我在创建上下文时指定一个值，而不是在通过提供程序设置它时指定一个值，它将具有一个值。

我在这里做错了什么？

Answer 1

您的 Auth 在组件内调用，但您在 Auth 使用之前调用了 useContext，这意味着您的 Context API 尚未初始化

在通常的组件中，您可以使用像这样的组件包装器来初始化它们

<Context.Provider>
  <YourComponent/> // you call `useContext` in `YourComponent`
</Context.Provider>

但在 Next.js 中，尤其是在页面级组件下，由于代码整洁问题，这不是构建多个 Context API 的好方法

我建议你应该像下面那样将你的 Auth 移动到 _app.tsx ，这将帮助你在所有页面级组件呈现之前初始化你的 Context API

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

  return (
    <React.Fragment>
      <Auth>
        <Component {...pageProps} />
      </Auth>
    </React.Fragment>
  )
}

破折号.tsx

const Dash: NextPage<dashPageProps> = (props) => {

  const contextMsg = useContext(UserContext)

  const submitForm = () => {
    console.log("logout")
  }

  return (
    <div className="w-screen">
      <div className='text-xl'>
        Dashboard
      </div>
      <h1>{contextMsg}</h1>
      <button className='bg-gray-400 border-2 border-gray-600 w-fit mt-5' onClick={submitForm} >Log out</button>
    </div>
  )
}

export default Dash