reactjs - 当我将 stateprovider 包裹在 reactjs 中的一个组件周围时,我的整个项目没有显示在本地主机中
问题描述
<Router>
<div className='app'>
<Authprovider>
<Switch>
<Route exact path='/posts'>
<Header />
<Posts />
<Footer />
</Route>
<Route exact path='/projects'>
<Header />
</Route>
<Route exact path='/about'>
<Header />
</Route>
<Route exact path='/login'>
<Login />
</Route>
<Route exact path='/signup'>
<Container
className='d-flex align-items-center justify-content-center'
style={{ minHeight: '100vh' }}
>
<div className='w-100' style={{ maxWidth: '400px' }}>
<Signup />
</div>
</Container>
</Route>
<Route exact path='/'>
<Header />
<Main />
<Footer />
</Route>
</Switch>
</Authprovider>
</div>
</Router>
容器是从引导程序导入的。Authprovider 是包裹所有组件的组件,因此我可以使用所有组件中的值
当我包装 authprovider 时,我的屏幕变黑了,所有数据都消失了,但我在控制台中没有任何错误
import React, { useState, useEffect, useContext } from 'react'
import { auth } from './firebase'
const AuthContext = React.createContext()
export const useAuth = () => {
return useContext(AuthContext)
}
export const Authprovider = ({ children }) => {
const [currentuser, setcurrentuser] = useState()
const [loading, setloading] = useState(true)
const value = {
currentuser,
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
setcurrentuser(user)
setloading(false)
})
unsubscribe()
}, [])
return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}
我能知道我犯的错误吗?
解决方案
推荐阅读
- javascript - 如何使用 javascript 获取原始 gnss 数据?
- mysql - 获取count mysql列表
- javascript - 如何通过 Javascript 更改 url 名称
- windows - 批处理脚本中的 zip 权限被拒绝
- python - 如何编辑 PersonalDictionary.zip,我可以使用台式计算机手动添加单词并再次导入文件吗?
- mysql - Mysql:每个选项的第一个匹配项
- html - 如何使用html jquery脚本编辑css悬停
- python - Python:使用 xlrd 从 excel 中读取百分比值
- python - 如何连续运行一个python脚本一天
- protractor - 我如何通过量角器代码单击电子邮件中的链接