如何在react中删除新的firebase onAuthStateChanged侦听器

Question

我正在反应网络应用程序中使用react-router实现firebase auth.

用户使用弹出窗口登录(在/登录)Facebook或Google,然后如果成功,我将路由到主应用程序(/).在主应用程序组件中,我监听身份验证状态更改:

  componentWillMount() {
    this.authListener = this.authListener.bind(this);
    this.authListener();
  }

authListener侦听身份验证更改:

authListener() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log('user changed..', user);
        this.setState({
          User: {
            displayName: user.displayName
          }
        });
      } else {
        // No user is signed in.
        browserHistory.push('/signin');
      }
    });
  }

一切正常,除非我退出(并返回/登录)并使用Facebook或谷歌再次登录.然后我收到一个错误说:

警告:setState(...):只能更新已安装或安装的组件.

我怀疑现在卸载的先前登录状态应用程序中的onAuthStateChanged侦听器仍在运行.

有没有办法在App组件卸载时删除onAuthStateChanged侦听器？

Answer 1

我知道我迟到了，但这里有一个基于钩子的解决方案：

React.useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => { // detaching the listener
        if (user) {
            // ...your code to handle authenticated users. 
        } else {
            // No user is signed in...code to handle unauthenticated users. 
        }
    });
    return () => unsubscribe(); // unsubscribing from the listener when the component is unmounting. 
}, []);

Answer 2

您设置的所有听众也需要拆除.

你的怀疑非常多.

您应该使用componentWillUnmount生命周期方法来删除可能污染您的应用程序的任何剩余侦听器.

要清理听众,请参阅以下相关代码:

在您的authListener函数内部,您需要保存对组件内部侦听器的引用(它会在调用时返回给您firebase.auth().onAuthStateChanged).它将是一个钩子,它将取消引用侦听器并将其删除.

因此,不要只是调用它,而是保存返回的值

this.fireBaseListener = firebase.auth().onAuthStateChanged ...

当您的组件卸载时,请使用以下代码:

componentWillUnmount() {
   this.fireBaseListener && this.fireBaseListener();
   this.authListener = undefined;
}