[英]react context value undefined
我正在学习教程,但我遇到了反应上下文的问题
我的上下文组件看起来像这样
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
我知道这个问题已经在这里问了很多时间,我已经查看了这些线程,但仍然找不到解决方案。
有任何想法吗?
谢谢
为了从上下文中获取值,需要在组件树的更高位置有一个提供者。 因此,任何<AuthProvider>
的后代都可以调用useContext(firebaseAuth)
并查看{test: 'context is working'}
。 但是Router
在<AuthProvider>
之外,所以它只会获得默认值,在你的情况下是未定义的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.