如何删除新的Firebase onAuthStateChanged监听器在反应

Question

我正在用react路由器在react web应用程序中实现firebase auth。

用户使用弹出式登录功能使用Facebook或Google登录（at/sign），如果成功，我将路由到主应用程序（/）。在主应用程序组件中，我侦听身份验证状态更改：

  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');
      }
    });
  }

一切正常，除了我退出（然后回到 /signin），然后用脸书或谷歌再次登录。然后我得到一个错误说：

警告：设置状态（…）：只能更新已安装或正在安装的组件。

我怀疑现在卸载的上一个登录状态应用程序中的onAuthStateChanged侦听器仍在运行。

当应用程序组件卸载时，是否有方法删除onAuthStateChanged侦听器？

Answer 1

@Justin，因为onAuthStateChanged返回函数，所以您可以使用它来清除监听器...this.fireBaseListener=firebase.auth（）. onAuthStateChanged

文档：https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged

返回非空的firebase.Promise，其中包含字符串的非空数组

Answer 2

您设置的任何侦听器也需要拆下。

你的猜疑很准确。

您应该使用组件WillUnMount生命周期方法来删除任何可能污染应用的剩余侦听器。

要清除侦听器，以下是相关代码：

在函数中，您需要在组件中保存对监听器的引用（它会在调用firebase.auth（）. onAuthStateChanged后返回给您）。它将是一个钩子，将取消引用侦听器并删除它。

因此，不要只是调用它，而是将返回的值保存为这样

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

当您的组件未挂载时，请使用以下代码：

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

Answer 3

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

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. 
}, []);