Question

我正在尝试创建导航栏。当用户未登录时，他们会看到一个导航栏，仅带有页面标题。用户登录后，应该会看到标题，其他页面，电子邮件地址和注销按钮。

我可以检索电子邮件地址，但是当我刷新页面并单击注销按钮时，出现错误消息：

TypeError：无法读取null的属性“电子邮件”

我将我的代码附加到导航栏，以及如何在下面的app.js中添加代码。

我不确定如何解决这个问题。

NavigationBar.js：

const NavigationBar = ({ authUser }) => (
  <div>{authUser ? <NavigationBarAuth /> : <NavigationBarNonAuth />}</div>
);

const NavigationBarAuth =()=>{
    return (
         ...
         <Grid item xs={3}>
           <div className ="nav-user"> 
               <a className = "font user">{fire.auth().currentUser.email}</a>
           </div>
         </Grid>    
    );

App.js：

 constructor(props) {
    super(props);

    this.state = {
      authUser: null,
      // authUser: JSON.parse(localStorage.getItem('authUser')),
    };
  }
  componentDidMount() {
    this.listener = fire.auth().onAuthStateChanged(
      authUser => {
        authUser
          ? this.setState({ authUser })
          : this.setState({ authUser: null });
      },
    );
  }
 componentWillUnmount() {
    this.listener();
  }
  render() {
    return (
            ...
            <NavigationBar authUser={this.state.authUser} />
    );
  }

Answer 1

调试后，我知道问题出在其他地方。我有一个登出功能，并在按钮onClick中调用了该功能。我错误地调用了该函数，这就是为什么退出签发函数并使用户无效的原因。感谢您的帮助和努力。

刷新页面后，用户信息会丢失（Firebase + React）

1 个答案: