反应上下文值未定义
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