为什么我的 firebase 身份验证显示名称没有使用 react js 正确更新？答案

【问题标题】：why is my firebase authentication display name not getting updated properly with react js?为什么我的 firebase 身份验证显示名称没有使用 react js 正确更新？
【发布时间】：2021-02-19 13:32:59
【问题描述】：

我正在尝试为我的 react 应用程序构建 firebase 身份验证。登录后，我尝试更新 displayName，然后重定向。在重定向页面上，我尝试通过获取同时保存的显示名称来问候用户使用 firebase 注册..此页面在我重定向后立即正常工作，但如果我重新加载此页面，则它无法显示 displayName 并引发此错误：

TypeError: 无法读取 null 的属性“displayName”

这是点击注册按钮时触发的功能..

 const signup = async () => {
        try{
            await firebaseApp.auth().createUserWithEmailAndPassword(email, password)
            await firebaseApp.auth().currentUser.updateProfile({displayName:username})
            console.log(firebaseApp.auth().currentUser)
            if (!firebaseApp.auth().currentUser){
                setLoading(true)
            }
            history.push('/home')
        }catch (error){
            alert(error.message)
        }
    }

这是注册页面重定向到的页面的 JSX：

<div className="greetings">
  Good Evening {firebaseApp.auth().currentUser.displayName}
</div>

为什么会出现这个问题以及如何解决？

【问题讨论】：

firebaseApp.auth().currentUser 可能需要一些时间来解决，因此在评估时，它可能仍在解决过程中。而是订阅onAuthStateChanged 并更新状态，因为该挂钩会发出包括用户信息在内的身份验证值。在某个顶级组件上订阅它，并通过 props、上下文、redux 或任何您想要的机制向下传递用户值。这不仅仅是 firebase 的事情，任何异步操作都会发生这种情况。

标签： javascript reactjs firebase firebase-authentication

【解决方案1】：

firebaseApp.auth().currentUser 在页面首次加载时始终为空。直到一段时间后，在 SDK 能够加载并验证该用户的身份验证令牌之后，它才会包含 User 对象。您应该设置一个auth state observer，而不是使用currentUser，如文档中所示。一旦知道 User 对象，这个观察者就会被调用。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    // ...
  } else {
    // User is signed out.
    // ...
  }
});

您可以使用此观察器函数的结果来了解用户何时登录或退出一段时间。要了解有关其工作原理的更多信息，请阅读此blog post。

【讨论】：