透過 onAuthStateChanged 在 Firebase 中查詢包含陣列的使用者資料時遇到無限循環問題

Question

<p>我的目前環境是ReactJS 18.2.0，使用Firebase 10運行。 </p> <p>我目前遇到的問題是使用onAuthStateChanged在使用者載入或登入頁面時查詢有關使用者的資料。 </p> <p>以下是用於處理Firebase Auth的自訂服務的程式碼片段範例。 </p> <p>所有設定都是上下文的一部分，都是useState。 </p> <pre class="brush:js;toolbar:false;">const subscribeToAuthChanges = ( handleAuthChange, setLoadingState, setUserRole, setEmail, setFirstName, setIsActive, setLastName, setLocation, setUserID ) => { onAuthStateChanged(auth, (user) => { if (user) { handleAuthChange(user); FirebaseFirestoreService.getUserData(user.uid).then((data) => { setUserID(user.uid); setUserRole(data.role); setEmail(data.email); setFirstName(data.firstName); setIsActive(data.isActive); setLastName(data.lastName); setLocation(data.location); }); setLoadingState(false); } else { setLoadingState(false); } }); }; </pre> <p>FirebaseFirestoreService.getUserData()函數</p> <pre class="brush:js;toolbar:false;">const getUserData = async (id) => { const docRef = doc(db, "users", id); const docSnap = await getDoc(docRef); if (docSnap.exists()) { return docSnap.data(); } else { return null; } }; </pre> <p>這不應該在useEffect中運行，上下文被創建來處理這個問題。</p>

從「react」匯入 React, { useState };
從“../Services/FirebaseAuthService”導入FirebaseAuthService；

const FirebaseAuth = React.createContext({
  使用者：空，
  加載：真實，
  角色：“”，
  電子郵件：“”，
  名字：“”，
  是否活躍：假，
  姓氏：“”，
  位置：“”，
  用戶ID：“”，
});

匯出 const FirebaseAuthProvider = ({ 兒童 }) => {
  const [用戶，setUser] = useState(null);
  const [角色，setRole] = useState(null);
  const [電子郵件，setEmail] = useState(“”);
  const [firstName, setFirstName] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState(“”);
  const [位置，setLocation] = useState(“”);
  const [userID, setUserID] = useState(“”);

  const [正在加載，setLoading] = useState(true);

  FirebaseAuthService.subscribeToAuthChanges(
    設定用戶，
    設定加載，
    設定角色，
    設定郵箱，
    設定名字，
    設定為活動狀態，
    設定姓氏，
    設定位置，
    設定用戶ID
  ）；

  返回 （
    <FirebaseAuth.Provider
      值={{
        用戶，
        載入中,
        角色，
        電子郵件，
        名，
        姓，
        活躍，
        地點，
        使用者身份，
      }}
    >
      {孩子}
    </FirebaseAuth.Provider>
  ）；
};

導出預設 FirebaseAuth；
</前>
<p>在這個例子中，我缺少一個查詢字串讀寫的設定函數，然而，以任何方式查詢該數組都會導致onAuthStateChanged()不斷循環，反覆向Firebase發出讀取請求。
<p>有沒有讀取解決方案但無法解決這個問題？</p>
<p>我嘗試透過循環進行備份來避免遇到這個問題，但是，以任何方式查詢它都會導致Firebase被反覆POST請求。</p>            

Answer 1

你的循環運行的原因是因為你沒有在副作用中設定onAuthStateChanged()，請嘗試以下操作

const FirebaseAuth = React.createContext({
  user: null,
  loading: true,
  role: '',
  email: '',
  firstName: '',
  isActive: false,
  lastName: '',
  location: '',
  userID: '',
});

export const FirebaseAuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [role, setRole] = useState(null);
  const [email, setEmail] = useState('');
  const [firstName, setFirstName] = useState('');
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState('');
  const [location, setLocation] = useState('');
  const [userID, setUserID] = useState('');

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setLoading(true);
      if (user) {
        setUser(user);
        FirebaseFirestoreService.getUserData(user.uid).then((data) => {
          setUserID(user.uid);
          setUserRole(data.role);
          setEmail(data.email);
          setFirstName(data.firstName);
          setIsActive(data.isActive);
          setLastName(data.lastName);
          setLocation(data.location);
        });
        setLoadingState(false);
      } else {
        setLoadingState(false);
      }
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <FirebaseAuth.Provider
      value={{
        user,
        loading,
        role,
        email,
        firstName,
        lastName,
        isActive,
        location,
        userID,
      }}
    >
      {children}
    </FirebaseAuth.Provider>
  );
};

export default FirebaseAuth;