React中使用Firebase的createUserWithEmailAndPassword方法时displayName返回null的问题

嘿，我一眼就看出问题出在哪啦！你现在的代码顺序完全搞反了——你先尝试更新用户的displayName，但这时候用户还根本没创建出来呢！auth.currentUser在调用createUserWithEmailAndPassword之前是null，所以updateProfile根本找不到要更新的用户对象，自然就设置不了displayName啦。

正确的处理步骤应该是这样的： #

• 先调用createUserWithEmailAndPassword创建用户，等待这个异步操作完成，拿到刚创建的用户实例
• 再用这个刚创建的用户实例去调用updateProfile设置displayName

修改后的createUser函数代码： #

const createUser = async (email, password, username) => {
  // 先创建用户，拿到用户凭证
  const userCredential = await createUserWithEmailAndPassword(auth, email, password);
  const user = userCredential.user;
  
  // 用刚创建的user对象更新profile，而不是依赖auth.currentUser
  await updateProfile(user, {
    displayName: username
  });
  
  return userCredential;
};

为什么原来的代码失效？ #

• createUserWithEmailAndPassword是异步函数，你在调用它之前就执行updateProfile(auth.currentUser)，这时候用户还没被创建，auth.currentUser的值是null，这个更新操作相当于对空对象执行，完全不起作用。
• 就算你把updateProfile放在createUserWithEmailAndPassword之后，但如果不等待它完成（不用await），也可能出现跳转后displayName还没同步的情况，所以一定要确保两个异步操作按顺序完成。

补充小提醒： #

你的handleSubmit里已经用了await createUser(...)，所以只要修改createUser函数，就能保证在跳转之前完成用户创建和profile更新，这样到/account页面时就能正确获取到displayName了。

备注：内容来源于stack exchange，提问作者wch