开发者问题收集

反应上下文值未定义

2020-06-22
511

我正在按照教程进行操作,但在使用 React 上下文时遇到了问题

我的上下文组件如下所示

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

我知道这个问题已经在这里被问过很多次了,我查看了那些帖子,但仍然找不到解决方案。

有什么想法吗?

谢谢

1个回答

为了从上下文中获取值,组件树中更高位置需要有一个提供程序。因此,任何 <AuthProvider> 后代 都可以调用 useContext(firebaseAuth) 并查看 {test: 'context is working'> 。但 Router 位于 <AuthProvider> 之外,因此它只会获取默认值,而默认值在您的情况下是未定义的。

Nicholas Tower
2020-06-22