Menghadapi isu gelung tak terhingga apabila menanyakan data pengguna yang mengandungi tatasusunan dalam Firebase melalui onAuthStateChanged

Question

Persekitaran semasa saya ialah ReactJS 18.2.0, berjalan dengan Firebase 10.

Masalah yang saya hadapi pada masa ini ialah menggunakan onAuthStateChanged untuk menanyakan data tentang pengguna apabila mereka memuatkan atau log masuk ke halaman.

Berikut ialah contoh coretan kod untuk perkhidmatan tersuai yang mengendalikan Firebase Auth.

Semua tetapan adalah sebahagian daripada konteks dan semuanya useState.

const subscribeToAuthChanges = (
  handleAuthChange,
  setLoadingState,
  setUserRole,
  setEmail,
  setFirstName,
  setIsActive,
  setLastName,
  setLocation,
  setUserID
) =>
  onAuthStateChanged(auth, (pengguna) => {
    jika (pengguna) {
      handleAuthChange(pengguna);

      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);
    } lain {
      setLoadingState(false);
    }
  });
};

FirebaseFirestoreService.getUserData() fungsi
const getUserData = async (id) =>
  const docRef = doc(db, "pengguna", id);
  const docSnap = tunggu getDoc(docRef);
  jika (docSnap.exists()) {
    kembalikan docSnap.data();
  } lain {
    kembali null;
  }
};

Ini tidak sepatutnya dijalankan dalam useEffect, konteks dicipta untuk mengendalikan perkara ini.
import React, { useState } daripada "react";
import FirebaseAuthService daripada "../Services/FirebaseAuthService";

const FirebaseAuth = React.createContext({
  pengguna: null,
  memuatkan: benar,
  peranan: "",
  e-mel: "",
  Nama pertama: "",
  isActive: palsu,
  Nama keluarga: "",
  lokasi: "",
  ID pengguna: "",
});

export const FirebaseAuthProvider = ({ kanak-kanak }) => {
  const [pengguna, setUser] = useState(null);
  const [peranan, setRole] = useState(null);
  const [e-mel, setEmail] = useState("");
  const [FirstName, setFirstName] = useState("");
  const [isActive, setIsActive] = useState(false);
  const [lastName, setLastName] = useState("");
  const [lokasi, setLocation] = useState("");
  const [userID, setUserID] = useState("");

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

  FirebaseAuthService.subscribeToAuthChanges(
    setUser,
    setLoading,
    setRole,
    setEmail,
    setFirstName,
    setIsActive,
    setLastName,
    setLocation,
    setUserID
  );

  kembali (
    
      {anak-anak}
    
  );
};

eksport FirebaseAuth lalai;

在这个例子中，我缺少一个查询字符串数组的设置函数，然而，以任何查询字符串数组的设置函数，然而，以任何柹说导致onAuthStateChanged()不断循环，反复向Firebase发出读取请求。
有没有办法读取数组而不遇到这个问题？
我尝试通过循环遍历数组来避免遇到这个问题，然而，以任何方式查避免遇到这个问题，然而，以任何方式查郢询复POST请求。
            

Answer 1

Sebab gelung anda berjalan adalah kerana anda tidak menetapkan onAuthStateChanged() dalam kesan sampingan, sila cuba yang berikut

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;