reactjs - React Context Provider sätter inte värde

Jag försöker komma igång med React context hooks och jag verkar ha ett problem som jag inte förstår.

Jag har definierat en användarkontext som helt enkelt är en sträng som säger "hej användare" på följande sätt:

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

Då försöker jag få åtkomst på detta sätt:

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

Men inget skrivs ut även om jag har satt ett värde när jag använder UserContext.Provider. Det kommer att ha ett värde om jag anger ett när jag skapar kontexten men inte när jag sätter det genom providern.

Vad gör jag för fel här?

Svar #1

Din Auth kallas inom komponenten men du anropar useContext innan Auth används, vilket betyder att din Context API ännu inte har initialiserats

I de vanliga komponenterna kan du initialisera dem med en komponentomslag som

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

Men i Next.js, särskilt under en sidnivåkomponent, är det inte ett bra sätt att skapa flera Context API:er på grund av frågor om ren kod.

Jag skulle föreslå att du flyttar din Auth till _app.tsx som nedan, det skulle hjälpa dig att initiera ditt Context API innan alla sidnivåkomponenters renderingar

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

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

Dash.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

Svar #2

Du kan inte useContext utanför dess Provider.

Du kommer att behöva flytta upp din Auth-komponent ett nivå så att den omger Dash för att kunna använda const contextMsg=useContext(UserContext)

I slutändan bör ditt React-komponentträd se ut så här:

<Auth>
  <Dash />
</Auth>

Relaterade artiklar