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

小编典典

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

reactjs

我正在使用react-router在React Web应用程序中实现Firebase身份验证。

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

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

authListener侦听auth更改：

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）并再次使用facebook或google登录。然后我得到一个错误说：

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

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

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

阅读 253

2020-07-22

共1个答案

小编典典

您已建立的所有侦听器也需要拆除。

您的怀疑非常多。

您应该使用componentWillUnmount生命周期方法删除可能污染您的应用程序的所有剩余侦听器。

要清除侦听器，请使用以下相关代码：

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

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

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

当您卸载组件时，请使用以下代码：

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

2020-07-22