如何在“setUsername”场景中最小化 firestore 读取？

Question

我现在创建的代码正在运行，但我认为它在某种程度上不是最理想的，因为它对许多数据库读取都是如此 据我了解，“onAuthStateChange”可以理解为 useEffect 挂钩，只要用户身份验证就会调用它state 更改（登录、注销）。 每当发生这种情况时，都应检查数据库以查找用户选择的用户名。 但是，如果我看一下控制台，docSnap 会被记录很多次，这对我来说表明 function 比用户登录/注销时更频繁地被调用。

上下文组件

import { createContext } from "react/cjs/react.production.min";
import { onAuthStateChanged } from "firebase/auth";
import { doc, getDoc } from "firebase/firestore";
import { auth,db } from "./firebase";
import { useState, useEffect } from "react";

export const authContext = createContext({
  user: "null",
  username: "null",
});

export default function AuthenticationContext(props) {
  const [googleUser, setGoogleUser] = useState(null);
  const [username, setUsername] = useState(null);
  const [userID, setUserID] = useState(null);

  onAuthStateChanged(auth, (user) => {
    if (user) {
      setGoogleUser(user.displayName);
      setUserID(user.uid);
      getUsername();
    } else {
      setGoogleUser(null);
    }
  });


    const getUsername = async () => {
      const docRef = doc(db, `users/${userID}`);
      const docSnap = await getDoc(docRef);
      if(docSnap.exists()){
        setUsername(docSnap.data().username);
      }
      else{
        setUsername(null);
      }
    };
  

  return (
    <authContext.Provider value={{ user: googleUser, username: username }}>
      {props.children}
    </authContext.Provider>
  );
}

更重要的是，当我使用 google 登录并提交用户名时，组件不会被重新评估 - 因此需要刷新才能使所有更改生效，这与我没有更新 state 在登录页面的submitHandler。 如果您对我如何更专业地做到这一点有一些想法，请告诉我。 先感谢您！

在登录页面提交处理程序

const submitHandler = async (event) => {
    event.preventDefault();
    console.log(auth.lastNotifiedUid);
    await setDoc(doc(db, "users", auth.lastNotifiedUid), {
      displayName: user,
      username: username,
    });
    await setDoc(doc(db, "usernames", username), { uid: auth.lastNotifiedUid });
  };

Answer 1

正如 Dharmaraj 的评论中所指出的，您设置了对身份验证 state 的多个订阅。这是因为您在组件主体中调用onAuthStateChanged ，所以它会在每次渲染时执行。

为避免这种情况，您应该将 function 包装在useEffect中，以便您仅订阅组件安装，并取消订阅卸载：

export default function AuthenticationContext(props) {
  /* ... */
  React.useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => { /* ... */ });
    return unsubscribe;
  }, []);
  /* ... */
}