React Firebase应用user.displayName不显示问题排查与修复

问题1解答 #

该情况确实是异步执行特性导致的。Firebase Auth的updateProfile方法本身是异步方法，会返回Promise对象，你当前的代码没有等待该异步方法执行完成就直接调用了history.push触发路由跳转，因此跳转时displayName还未完成更新。

问题2解答 #

UI未即时渲染的核心原因是：调用updateProfile更新用户资料不会触发onAuthStateChanged监听回调，你存在本地状态user里的仍是更新前的旧用户对象，没有拿到最新的displayName，因此依赖该状态渲染的导航栏不会自动更新，只有刷新页面重新触发auth状态监听时才会拿到最新的用户信息。

修复步骤 #

1. 调整setUserName方法，返回updateProfile的Promise实例，方便后续等待异步执行完成

const setUserName = () => {
  return updateProfile(auth.currentUser, {
    displayName: name
  });
}

2. 调整signUpHandler的执行逻辑，等待用户资料更新完成后，手动更新本地user状态再触发路由跳转：

const signUpHandler = (e) => {
  e.preventDefault()
  signUp(user, pass)
    .then(result => {
      // 等待displayName更新完成
      return setUserName()
    })
    .then(() => {
      // 手动更新本地用户状态，触发UI重渲染
      setUser({...auth.currentUser})
      // 资料更新完成后再跳转路由
      history.push(url)
    })
    .finally(() => {
      setIsLoading(false)
    })
    .catch((error) => {
      setError(error.message)
    });
}

修改完成后两个问题都会同步解决：路由跳转时displayName已经更新完成，且本地用户状态更新后导航栏会即时渲染最新的displayName，无需刷新页面。

内容的提问来源于stack exchange，提问作者Faraz