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

Question

我正在使用 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 侦听器仍在运行。

有没有办法在 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

您可以像这样检查订阅，而不是检查componentDidMount() 中的onAuthStateChanged() 函数。

componentWillMount() {
    //following line will help you to setState() but not required
    let set =  this  

    //this is our trick
    this.unsubscribe  = firebase.auth().onAuthStateChanged(user => {
        if (!user) {
            //navigate to guest stack
            //actually im using react-navigation
            set.props.navigation.navigate('Guest'); 
        } else {
            //set current user to state 
            set.setState({
                user: user,
                loading: false
            })
        }
    });
}

//What you have to do next is unsubscribe ;) 
componentWillUnmount() {
    this.unsubscribe();
}

Answer 3

@Justin 因为onAuthStateChanged 返回函数，所以你可以用它来清除监听器...... this.fireBaseListener = firebase.auth().onAuthStateChanged

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

返回非空 firebase.Promise 包含非空字符串数组

Answer 4

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

您的怀疑非常准确。

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

为了清除监听器，下面是相关代码：

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

所以不要只是调用它，而是保存返回的值

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

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

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