Question

需要一点帮助。我正在尝试将auth侦听器添加到我的react应用程序中，但是我遇到了内存泄漏问题，我需要一直使该侦听器处于活动状态，以便它将呈现已登录的用户内容，登录和注册为在与用户相同的路由上，在身份验证状态更改时，我只是呈现不同的组件。

  state = {
    login: false
  };

  componentWillMount() {
    this.authListener();
  }

  authListener = () => {
    auth.onAuthStateChanged(user => {
      if (user) {
        this.setState({
          login: true
        });
      } else this.setState({ login: false });
    });
  };

  redirectOnLogIn = () => {
    let { login } = this.state;
    if (!login) {
      return <Auth />;
    } else {
      return <Users />;
    }
   };

Answer 1

componentWillMount()-此函数可能在调用初始渲染之前最终被多次调用，因此可能导致触发多个副作用。因此，不建议将此功能用于任何引起副作用的操作。尝试使用componentDidMount()并进行报告。附言同样如果我是你，我将auth.onAuthStateChanged移动到您的app.js文件中-像这样

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    ReactDOM.render(<Users />, document.getElementById("app"));
    }
  } else {
  ReactDOM.render(<Auth />, document.getElementById("app"));
  }
});

对于初次运行，您还可以在其之前添加类似的内容。

var user = firebase.auth().currentUser; if(user){ ... }else{ ... }

如何在不导致内存泄漏的情况下添加身份验证侦听器火力基地

1 个答案: