当我将stateprovider包装在reactjs中的组件周围时，我的整个项目不会显示在localhost中

容器是从引导导入的。 Authprovider是环绕所有组件的组件，以便我可以使用所有组件中的值

当我包装authprovider时，我的屏幕变为空白，所有数据都消失了，但我在控制台中没有得到任何错误

 <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>

import React，{useState，useffect，useContext}来自“React”
从“/firebase”导入{auth}
const AuthContext=React.createContext（）
导出常量useAuth=（）=>{
返回useContext（AuthContext）
}
导出常量Authprovider=（{children}）=>{
const[currentuser，setcurrentuser]=useState（）
常量[loading，setloading]=useState（true）
常量值={
当前用户，
}
useffect（（）=>{
const unsubscribe=auth.onAuthStateChanged（（用户）=>{
setcurrentuser（用户）
设置加载（错误）
})
退订
}, [])
返回(
{！正在加载（&children}
)
}

---

我能知道我犯了什么错误吗？

您的

加载状态从未设置为
false
，然后。。。检查
auth.onAuthStateChanged
的回调是否正确执行，当
加载
为真时，您隐藏了所有应用程序UI，包括路由器和登录路径，这可能不是您想要做的。你真的想在加载为真的情况下呈现加载指示器并仍然呈现应用程序吗？我真的忘记了一个，谢谢你的
加载
状态从未设置为
假
，然后。。。检查
auth.onAuthStateChanged
的回调是否正确执行，当
加载
为真时，您隐藏了所有应用程序UI，包括路由器和登录路径，这可能不是您想要做的。你真的想在加载为真的情况下呈现加载指示器，并且仍然呈现应用程序吗？我真的忘了，谢谢
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>
  )
}