创建用户后如何正确调用updateProfile()设置displayName属性

• createUserWithEmailAndPassword 是异步Promise接口，现有代码没有等待用户创建流程执行完毕就调用updateProfile，执行时序错误。
• 你传入的currentUser是通过onAuthStateChanged监听写入React状态的值，React状态更新本身存在异步延迟：用户刚创建完成的瞬间，状态监听回调还未触发，状态里存储的还是旧值（可能是undefined/null，或是之前登录的其他用户对象），并不是刚创建的新用户，自然无法完成属性更新。

不需要依赖自定义Hook返回的状态currentUser执行创建后的更新操作，直接等待createUserWithEmailAndPassword的返回结果，从返回的用户凭证中取出新创建的用户对象，再调用updateProfile即可。
修正后的注册函数代码如下：

// 移除多余的currentUser入参
export async function signup(email, password) {
  // 等待用户创建完成，获取新用户凭证
  const userCredential = await createUserWithEmailAndPassword(auth, email, password)
  const newUser = userCredential.user
  // 等待用户资料更新完成
  await updateProfile(newUser, {
    displayName: "some name"
  })
  // 若需要立刻在全局获取到最新的用户属性，可追加这行强制刷新用户状态
  // await newUser.reload()
}

如果习惯用Promise链式写法，也可以按下面的方式写：

export function signup(email, password) {
  return createUserWithEmailAndPassword(auth, email, password)
    .then(userCredential => {
      const newUser = userCredential.user
      return updateProfile(newUser, { displayName: "some name" })
    })
}

你之前写的useAuth自定义Hook不需要做任何修改，等updateProfile执行完成后，onAuthStateChanged监听会自动触发同步最新的用户数据，React状态中存储的currentUser会自动带上更新后的displayName属性。

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