Javascript 状态变化反应

我正在尝试查看是否有使用firebase的用户，但每次我登录到我的应用程序和

控制台时，log

用户都会说没有用户，我无法登录我的应用程序

import React,{Component} from 'react';

import SignUp from './components/Authentication/SignUp';

import {BrowserRouter as Router,Switch,Route,Link} from 'react-router-dom';

import Feed from './components/Feed/Feed';

import Search from './components/SearchUser/Search';

import Profile from './components/Profile/Profile';

import Header from './components/Header/Header';

import firebase from './util/firebase';

class App extends Component
 {
 
constructor(){

   super();

   this.state={
     user:''
   }

 } 


 componentDidMount(){

  firebase.auth().onAuthStateChanged(function(user) {

    if (user) {
      // User is signed in.
      this.setState({
        user:user
      })
      // ...
    } else {
      // User is signed out.
      // ...
    }
  });
 }
  
  render(){

    const {user}=this.state;

    console.log(user);

    return(

      <div>
          {
           user?(
             <Router>
               <Header/>
                <Switch>
                   <Route exact path="/feed">
                       <Feed user={user}/>
                   </Route>
                   <Route path="/search">
                       <Search/>
                   </Route>
                   <Route path="/profile">
                       <Profile/>
                   </Route>
                </Switch>
             </Router>
           ):(
             <SignUp/>
           )
          }
      </div>
    )
  }
}

export default App;

import React，{Component}来自'React'；
从“./components/Authentication/SignUp”导入注册；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./components/Feed/Feed”导入提要；
从“./components/SearchUser/Search”导入搜索；
从“./components/Profile/Profile”导入配置文件；
从“./components/Header/Header”导入标题；
从“/util/firebase”导入firebase；
类应用程序扩展组件
{
构造函数（）{
超级（）；
这个州={
用户：“”
}
} 
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
//用户已登录。
这是我的国家({
用户：用户
})
// ...
}否则{
//用户已注销。
// ...
}
});
}
render（）{
const{user}=this.state；
console.log（用户）；
返回(
{
用户(
):(
)
}
)
}
}
导出默认应用程序；

问题：没有用户，因为react在onAuthStateChanged的状态更改之前呈现组件，所以呈现用户时为null

解决方案：（可能不是最好的方法）：

更新状态时显示后退UI

我正在通过更改您的代码来共享我的解决方案

当我面对同样的问题时，它对我起了作用

import React,{Component} from 'react';

import SignUp from './components/Authentication/SignUp';

import {BrowserRouter as Router,Switch,Route,Link} from 'react-router-dom';

import Feed from './components/Feed/Feed';

import Search from './components/SearchUser/Search';

import Profile from './components/Profile/Profile';

import Header from './components/Header/Header';

import firebase from './util/firebase';

class App extends Component
 {
 
constructor(){

   super();

   this.state={
     user:'',
     loading: true
   }

 } 


 componentDidMount(){
     
  firebase.auth().onAuthStateChanged(function(user) {

    if (user) {
      // User is signed in.
      this.setState({
        user:user,
        loading: false
      })
      // ...
    } else {
      // User is signed out.
      // ...
    }
  });
 }
  
  render(){

    const {user, loading}=this.state;

    console.log(user);

    if(loading) return <div>loading...</div>

    return(

      <div>
          {
           user?(
             <Router>
               <Header/>
                <Switch>
                   <Route exact path="/feed">
                       <Feed user={user}/>
                   </Route>
                   <Route path="/search">
                       <Search/>
                   </Route>
                   <Route path="/profile">
                       <Profile/>
                   </Route>
                </Switch>
             </Router>
           ):(
             <SignUp/>
           )
          }
      </div>
    )
  }
}

import React，{Component}来自'React'；
从“./components/Authentication/SignUp”导入注册；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./components/Feed/Feed”导入提要；
从“./components/SearchUser/Search”导入搜索；
从“./components/Profile/Profile”导入配置文件；
从“./components/Header/Header”导入标题；
从“/util/firebase”导入firebase；
类应用程序扩展组件
{
构造函数（）{
超级（）；
这个州={
用户：“”，
加载：正确
}
} 
componentDidMount（）{
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
//用户已登录。
这是我的国家({
用户:用户,，
加载：错误
})
// ...
}否则{
//用户已注销。
// ...
}
});
}
render（）{
const{user，load}=this.state；
console.log（用户）；
如果（加载）返回加载。。。
返回(
{
用户(
):(
)
}
)
}
}

能否提供您登录用户的部分的片段？或者，至少检查是否正在登录并且没有抛出错误。