反應上下文值未定義

Question

我正在學習教程，但我遇到了反應上下文的問題

我的上下文組件看起來像這樣

import React from 'react'

export const firebaseAuth = React.createContext()

const AuthProvider = props => {
  const { children } = props
  return (
    <firebaseAuth.Provider
      value={{
        test: 'context is working',
      }}
    >
      {children}
    </firebaseAuth.Provider>
  )
}

export default AuthProvider

我正在嘗試在我的Router組件中測試我的上下文，不幸的是test未定義，我不確定如何調試它

import React, { useContext } from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import AuthProvider, { firebaseAuth } from './database/provider/AuthProvider'

const Router = () => {
  const test = useContext(firebaseAuth)
  console.log(test)
  return (
    <BrowserRouter>
      <AuthProvider>
        <Switch>
          <Route path="/login/" component={SignIn} />
   
          <Route component={NotFound} />
        </Switch>
      </AuthProvider>
    </BrowserRouter>
  )
}

export default Router

我知道這個問題已經在這里問了很多時間，我已經查看了這些線程，但仍然找不到解決方案。

有任何想法嗎？

謝謝

Answer 1

為了從上下文中獲取值，需要在組件樹的更高位置有一個提供者。 因此，任何<AuthProvider>的后代都可以調用useContext(firebaseAuth)並查看{test: 'context is working'} 。 但是Router在<AuthProvider>之外，所以它只會獲得默認值，在你的情況下是未定義的。