Question

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

我看到该用户可以登录，但是该用户在接下来的一秒内变为空，然后返回登录页面。我在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;

Answer 1

您可以尝试：

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

或

this.setState({
  user
});

在您的if（用户）语句中？

setState()

Answer 2

问题是我如何在navigationBarAuth（）中调用签出函数。之前的编写方式使签发功能立即启动，这就是为什么用户立即注销的原因。正确的书写方式是：

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

用户在onAuthStateChanged，firebase和反应后无效

2 个答案: