onAuthStateChanged を介して Firebase で配列を含むユーザー データをクエリするときに無限ループの問題が発生する

Question

現在の環境は ReactJS 18.2.0 で、Firebase 10 で実行されています。

現在発生している問題は、onAuthStateChanged を使用して、ユーザーがページを読み込むときまたはページにログインするときにユーザーに関するデータをクエリすることです。

以下は、Firebase Auth を処理するカスタム サービスのコード スニペットの例です。

すべての設定はコンテキストの一部であり、すべて useState です。

const subscribeToAuthChanges = (
  ハンドル認証変更、
  setLoadingState、
  setUserRole、
  セット電子メール、
  set名、
  setIsActive、
  set姓、
  セットロケーション、
  ユーザーIDを設定
) => {
  onAuthStateChanged(auth, (ユーザー) => {
    if (ユーザー) {
      handleAuthChange(ユーザー);

      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);
    } それ以外 {
      setLoadingState(false);
    }
  });
};

FirebaseFirestoreService.getUserData() 関数

const getUserData = async (id) => {
  const docRef = doc(db, "ユーザー", id);
  const docSnap = await getDoc(docRef);
  if (docSnap.exists()) {
    戻り値 docSnap.data();
  } それ以外 {
    null を返します。
  }
};

これは useEffect 内で実行すべきではありません。これを処理するためにコンテキストが作成されました。

import React, { useState } from "react";
FirebaseAuthService を「../Services/FirebaseAuthService」からインポートします。

const FirebaseAuth = React.createContext({
  ユーザー: null、
  読み込み中: true、
  役割: ""、
  電子メール: ""、
  名: ""、
  isActive: false、
  姓: ""、
  場所: ""、
  ユーザーID: ""、
});

import const FirebaseAuthProvider = ({ Children }) => {
  const [ユーザー、setUser] = useState(null);
  const [ロール、セットロール] = useState(null);
  const [電子メール, setEmail] = useState("");
  const [firstName, setFirstName] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState("");
  const [場所, setLocation] = useState("");
  const [ユーザーID, setUserID] = useState("");

  const [ロード中、setLoading] = useState(true);

  FirebaseAuthService.subscribeToAuthChanges(
    セットユーザー、
    セットロード中、
    セットロール、
    セット電子メール、
    set名、
    setIsActive、
    set姓、
    セットロケーション、
    ユーザーIDを設定
  );

  戻る （
    <FirebaseAuth.Provider
      値={{
        ユーザー、
        読み込み中、
        役割、
        Eメール、
        ファーストネーム、
        苗字、
        アクティブです、
        位置、
        ユーザーID、
      }}
    >
      {子供たち}
    </FirebaseAuth.Provider>
  );
};

デフォルトの FirebaseAuth をエクスポートします。

この例では、文字列の設定関数を 1 つ削除していますが、何らかの方法でその数値セットを都市内で認証すると、AuthStateChanged() が循環せず、Firebase に逆に認証要求が発行されます。

有没办法读取数组而不遇此这个问题?

私たちは、循環遍歴数グループを通じてこの問題に遭遇することを回避すると考えていますが、何らかの方法で Firebase が逆 POST 要求を受けることを確認します。

Answer 1

ループが実行されている理由は、副作用で onAuthStateChanged() を設定していないためです。次のことを試してください。

リーリー