用户在 onAuthStateChanged、firebase 和反应后被取消答案

【问题标题】：User gets nullified after onAuthStateChanged, firebase and react用户在 onAuthStateChanged、firebase 和反应后被取消
【发布时间】：2019-04-15 11:17:45
【问题描述】：

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

我看到用户可以登录，但是用户在下一秒就变成了 null 并返回到登录页面。我在 console.log() 的帮助下跟踪了它。我得到这样的东西：

authUser 导航嘿。用户 authUser 导航空值 NonAuthUser 导航没有用户 NonAuthUser 导航 NonAuthUser 导航

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

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;

【问题讨论】：

请给我们更多代码或准备最小、完整和可验证的示例 - stackoverflow.com/help/mcve

标签： reactjs firebase firebase-authentication

【解决方案1】：

你可以试试：

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

或

this.setState({
  user
});

在你的 if (user) 语句中？

setState()

【讨论】：

我刚刚更新了我的代码。我发现问题出在Signout中。我调用注销函数的方式，它被触发并立即将用户注销。但我不知道为什么会这样。

【解决方案2】：

问题是我如何在 navigationBarAuth() 中调用登出函数。之前写的方式，让登出功能一下子触发，这就是为什么用户立即登出的原因。正确的写法是：

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

【讨论】：