Javascript 除非刷新页面，否则React Firebase displayName将返回null

我是Firebase的新手，第一次使用它创建了一个用户系统，您可以在其中使用Firebase身份验证进行注册、登录和注销。有一个用户名状态变量，还有一个用户状态变量。注册后，用户名被正确存储，但是用户变量仍然返回null，除非我刷新页面，然后在用户正确显示之后。有什么我遗漏的吗

const [open, setOpen] = useState(false);
const [openSignIn, setOpenSignIn] = useState(false);
const [modalStyle] = useState(getModalStyle);
const classes = useStyles();
const [username, setUsername] = useState("")
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [user, setUser] = useState(null);


useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged((authUser) => {
    if (authUser) {
      // user is logged in...
      console.log(authUser);
      setUser(authUser.displayName);

      if (authUser.displayName) {
        
      } else {
        //if user was just created
        return authUser.updateProfile({
          displayName: username,
        });
      }
    } else {
      setUser(null);
    }
  });

  return () => {
    unsubscribe();
  };
}, [user, username]);

  const signUp = (event) => {
    event.preventDefault();
    auth
      .createUserWithEmailAndPassword(email, password)
      .then((authUser) => {
        authUser.user.updateProfile({
          displayName: username
        })
      })
      .catch((error) => alert(error.message));
    
    setOpen(false)
  }
  
  const signIn = (event) => {
    event.preventDefault();
    auth
      .signInWithEmailAndPassword(email, password)
      .catch((error) => alert(error.message));
  
    setOpenSignIn(false)
  }

---

在最新版本的web SDK中（自2017年5月的v4.0.0起），当侦听器被激发时，更改为仅在登录和注销时，但它过去是对与用户相关联的ID令牌的任何更改（如更新

显示名称

）。如果您想恢复到旧的功能，您可以使用

我建议将

user

重命名为类似

userDisplayName

的其他名称，因为您应该保留

user

以用于

firebase.auth.user

的实例。这将防止与您偶然发现的其他代码示例混淆

就个人而言，我建议将此功能从

onAuthStateChanged

处理程序中分离出来，如下所示：

// outside your component
function updateDisplayName(user, username) {
  if (!user) {
    return Promise.reject(new Error("You must be signed in first!"));
  }
  
  return user.updateProfile({
    displayName: username
  });
}

// outside your component
function updateDisplayName(user, username) {
  if (!user) {
    return Promise.reject(new Error("You must be signed in first!"));
  }
  
  return user.updateProfile({
    displayName: username
  });
}

// inside your component

// user == undefined -> still verifying auth token
// user == null -> signed out
// user is a firebase.user.User -> user signed in
const [user, setUser] = useState(() => firebase.auth().currentUser || undefined);
// username == null -> signed out/still verifying user token/displayName not set
// username is a string -> user signed in & displayName set
const [username, setUsername] = useState(user ? user.displayName : null);
// userIsLoading == true -> still verifying user token, lock the form/show loading icon
// userIsLoading == false -> `user` is resolved and ready for use
const userIsLoading = user === undefined;

// a value to store the proposed new username, connect this to an input
const [newUsername, setNewUsername] = useState("");
// an error message for the input of `newUsername`
const [usernameError, setUsernameError] = useState(null); 

// keep `user` & `username` (if available) up to date
useEffect(() => auth.onAuthStateChanged((user) => {
  setUser(user);
  setUsername(user ? user.displayName : null);
}), []);

// attach this to a button - don't connect to "onChange" of "newUsername"
// note: this returns a Promise that finishes when the username was either updated or failed to update
const onChangeUsernameSubmit = () => {
  return updateDisplayName(user, newUsername)
    .then(() => {
      // updated successfully. update state
      setUsername(newUsername);
      setUsernameError(null);
    })
    .catch((err) => {
      // failed to change username. invalid value? expired token?
      setUsernameError("username not changed: " + (err.message || "something unexpected went wrong"));
    });
}