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

IT技术 reactjs firebase react-router firebase-authentication
2021-05-01 05:55:42

我正在使用 react-router 在 react web 应用程序中实现 firebase auth。

用户使用弹出式登录通过 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 侦听器？

4个回答

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

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

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

你的怀疑是非常当场的。

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

要清除侦听器，这里是相关代码：

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

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

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

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

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

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

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

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

您可以像这样检查订阅，而不是检查onAuthStateChanged()内部功能componentDidMount()。

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();
}
其它你可能感兴趣的问题
上一篇异步 componentDidMount 时使用 React 的 Jest 和 Enzyme 进行测试 下一篇如何使脚本类型既是 text/babel 又是module？