Reactjs 在onAuthStateChanged、firebase和react之后，用户将被取消

我想在React中创建一个导航类。其想法是在用户未登录时显示带有网页标题的导航栏。登录后，他将看到另一个导航栏，其中包含标题、其他页面、用户电子邮件和注销按钮。 我正在尝试使用javascript条件来实现它（请参见下面的代码）

我看到用户可以登录，但是用户在接下来的几秒钟内就会返回到登录页面。我在console.log（）的帮助下跟踪了它。我得到这样的东西：

authUser导航 嘿用户 authUser导航 无效的 非授权用户导航 没有用户 非授权用户导航 非授权用户导航

为什么我会有这个问题？如果有人能给我解释一下，我将不胜感激

class NavigationBar extends Component {

  constructor(props) {
    super(props);

    this.state = {
      user: null,
    };
  }

  authListener = () =>{
      fire.auth().onAuthStateChanged((user) => {
        if (user) {
          this.setState(this.state.user = user);
          localStorage.setItem('user', user.uid);
          console.log("hey. user");
        } else {
          this.setState(this.state.user = null);
          localStorage.removeItem('user');
          console.log("no user");
        }
      });
    };
  componentDidMount(){
      this.authListener();
    }
 signOut = () => {
  fire.auth().signOut();

}
 navigationBarNonAuth =()=>{

  console.log('Navigation for NonAuthUser');

    return (
       <Grid container spacing={24}>
              <Grid item xs={6}>
                <Link to ={ROUTES.Login}>
                  <span>
                    <div className = "title">
                        <h1 className="app-title">SAVE ME!</h1>
                    </div>
                  </span>
                </Link>
              </Grid>
             .....
   );
  }


   navigationBarAuth =()=>{
     console.log('Navigation for authUser');

    return ( 
<Grid container spacing={24}>
              <Grid item xs={6}>
                <Link to ={ROUTES.Login}>
                  <span>
                    <div className = "title">
                        <h1 className="app-title">SAVE ME!</h1>
                    </div>
                  </span>
                </Link>
              </Grid>
                <Grid item xs={1}>
                <div className ="nav-sign font signout">
                  <i onClick={this.signOut()} className="fas fa-sign-out-alt" title="Sign Out"></i>
                </div>
              </Grid>
       .....
    );
  }
  render() {

    return (
          <div>
            {this.state.user ? this.navigationBarAuth() : this.navigationBarNonAuth()}

          </div>
      );
  }
}

export default NavigationBar;

类导航栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：null，
};
}
authListener=（）=>{
fire.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
this.setState（this.state.user=user）；
setItem（'user'，user.uid）；
log（“hey.user”）；
}否则{
this.setState（this.state.user=null）；
localStorage.removietem（'user'）；
console.log（“无用户”）；
}
});
};
componentDidMount（）{
this.authListener（）；
}
注销=（）=>{
fire.auth（）.signOut（）；
}
导航Barnonauth=（）=>{
log（“非授权用户导航”）；
返回(
救救我！
.....
);
}
navigationBarAuth=（）=>{
log（'authUser导航'）；
报税表（
救救我！
.....
);
}
render（）{
返回(
{this.state.user？this.navigationBarAuth（）：this.navigationBarNonAuth（）}
);
}
}
导出默认导航栏；

您可以试试：

this.setState((state, props) => ({
  user
}));

或

在您的if（user）语句中

---

问题在于如何在navigationBarAuth（）中调用注销函数。按照前面所写的方式，它使注销功能立即启动，这就是用户立即注销的原因。 正确的书写方法是：

<i onClick={this.signOut} className="fas fa-sign-out-alt" title="Sign Out"></i>

请给我们更多的代码或准备最小、完整和可验证的示例-我刚刚更新了代码。我发现问题出在签到上。按照我调用signout函数的方式，它会被触发并立即将用户注销。但我不知道为什么会这样。

<i onClick={this.signOut} className="fas fa-sign-out-alt" title="Sign Out"></i>