时间戳

首页 > 解决方案 > 刷新页面后用户信息丢失（Firebase + React）

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

问题描述

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

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

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

我正在附上导航栏的代码以及如何在 app.js 中使用它，如下所示。

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

导航栏.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>    
    );

应用程序.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} />
    );
  }

标签： javascriptfirebasereact-native

解决方案

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

推荐阅读