javascript - ReactJS firebase auth displayName 返回 null

Question

我正在开发 ReactJS 应用程序并集成了 Firebase 的身份验证以创建用户和登录功能。我无法弄清楚如何设置 displayName，因为我创建的每个帐户都有一个 displayName 为“null”。这是我创建用户帐户的功能。我仔细阅读了 Firebase 文档，却只能找到获取 displayName 的方法，但不知道如何设置它？

function CreateUser({ setUserInformation, setErrors, setLoggedIn }) {
  const signUpUser = useCallback(
    (e) => {
      e.preventDefault();

      const email = e.currentTarget.email.value;
      const password = e.currentTarget.password.value;
      const displayName = e.currentTarget.displayName.value;
      // const displayName = document.getElementById("name").value;
      const auth = getAuth();

      createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          // Signed in
          const user = userCredential.user;
          setLoggedIn(true);
          setUserInformation({
            email: user.email,
            displayName: user.displayName,
            uid: user.uid,
            accessToken: user.accessToken,
          });
          setErrors();
        })
        .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          console.warn({ error, errorCode, errorMessage });
          setErrors(errorMessage);
        });
    },
    [setErrors, setLoggedIn, setUserInformation]
  );

我的 App.js:

function App() {
  // Track if user is logged in
  const [loggedIn, setLoggedIn] = useState(false);
  // check to see if there is any loading...
  const [loading, setLoading] = useState(true);
  //store user information in state
  const [userInformation, setUserInformation] = useState({});
  const [appInitialized, setAppInitialized] = useState(false);
  // Error
  const [errors, setErrors] = useState();

  // Ensure app is initialized when it is ready to be
  useEffect(() => {
    // initialized firebase
    initializeApp(FirebaseConfig);
    setAppInitialized(true);
  }, []);

  // check to see if user is logged in
  // user loads page, check their status
  // set state accordingly
  useEffect(() => {
    if (appInitialized) {
      const auth = getAuth();
      onAuthStateChanged(auth, (user) => {
        if (user) {
          //user is signed in
          setUserInformation(user);
          setLoggedIn(true);
        } else {
          // user is signed out
          setUserInformation({});
          setLoggedIn(false);
        }
        // whenever state cxhanges setLoading to false
        setLoading(false);
      });
    }
  }, [appInitialized]);

  function logout() {
    const auth = getAuth();
    signOut(auth)
      .then(() => {
        setUserInformation({});
        setLoggedIn(false);
        setErrors();
      })
      .catch((error) => {
        console.warn(error);
        setErrors(error);
      });
  }

  if (loading || !appInitialized) return null;

  return (
    <div>
      <Header
        logout={logout}
        loggedIn={loggedIn}
        userInformation={userInformation}
      />
      <Router>
        <Routes>
          <Route
            path="/login"
            element={
              !loggedIn ? (
                <Login
                  setErrors={setErrors}
                  setLoggedIn={setLoggedIn}
                  setUserInformation={setUserInformation}
                />
              ) : (
                <Navigate to="/" />
              )
            }
          />
          <Route
            path="/create-user"
            element={
              !loggedIn ? (
                <CreateUser
                  setLoggedIn={setLoggedIn}
                  setUserInformation={setUserInformation}
                  setErrors={setErrors}
                />
              ) : (
                <Navigate to="/" />
              )
            }
          />
        </Router>

Answer 1

当新用户注册时，您必须使用 updateProfile() 方法更新他们的显示名称，如下所示:

const displayName = e.currentTarget.displayName.value;

createUserWithEmailAndPassword(auth, email, password)
  .then(async (userCredential) => {
    //  ^^^^^ async function 
    // Signed in
    const user = userCredential.user;
    setLoggedIn(true);

    // Updating user name
    await updateProfile(auth.currentUser, { displayName })

    setUserInformation({
      displayName,
      email: user.email,
      uid: user.uid,
      accessToken: user.accessToken,
    });
    setErrors();
  })

现在 user.displayName 应该更新了。查看documentation获取更多信息。