我正在学习一个教程,但是我在反应上下文方面遇到问题
我的上下文组件看起来像这样
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
我知道这个问题已经被问了很多时间了,我已经查看了这些线程,但仍然找不到解决方案。
有什么想法吗?
谢谢
答案 0 :(得分:1)
为了从上下文中获取值,需要在组件树的更高位置处提供一个提供程序。因此,.yml
的后裔都可以调用<AuthProvider>
并查看useContext(firebaseAuth)
。但是{test: 'context is working'}
在Router
之外,因此它将仅获得默认值,在您的情况下该值是未定义的。