如何将此 useEffect firebase onAuthStateChanged 函数转换为类？答案

【问题标题】：How can I convert this useEffect firebase onAuthStateChanged function to class?如何将此 useEffect firebase onAuthStateChanged 函数转换为类？
【发布时间】：2021-03-02 21:48:22
【问题描述】：

这是我在函数组件中使用的代码

useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      setIsLoggedIn(!!user);
    });
    return () => {
      unsubscribe();
    };
  });

这是我对类组件的尝试。

componentDidUpdate(
    prevProps: LessonDrawerProps,
    prevState: LessonDrawerState
  ) {
    firebase.auth().onAuthStateChanged(user => {
          if (user) {
            this.setState({
              isLoggedIn: true,
            });
          }
        });
}

类 onAuthStateChanged 检测没有像函数组件中那样正常工作。
如何做到这一点？

【问题讨论】：

标签： reactjs typescript firebase firebase-authentication

【解决方案1】：

componentDidUpdate 在组件更新时触发，在您的情况下似乎永远不会发生（或至少不会及时发生）。您实际上希望在将组件添加到小部件树后立即开始监听身份验证状态更改。

您需要将onAutStateChanged 放入componentDidMount 而不是componentDidUpdate。

【讨论】：

我目前正在使用导航栏中的语句。如果我在componentdidmount 中使用onAutStateChanged，导航栏始终不会更新状态。我的意思是当用户登录时，文本仍然是login 没有变成logout
这是出乎意料的，但我不能说为什么在没有复制的情况下会出错。您可以编辑您的问题以显示更新的代码吗？我们需要查看重现问题的最少代码。如果您在 jsbin 或 stackblitz 等站点中重现问题，然后在问题中包含该代码（及其链接），通常会有所帮助。