onAuthStateChanged를 통해 Firebase에서 배열이 포함된 사용자 데이터를 쿼리할 때 무한 루프 문제가 발생합니다.

Question

현재 환경은 Firebase 10에서 실행되는 ReactJS 18.2.0입니다.

현재 겪고 있는 문제는 사용자가 페이지를 로드하거나 로그인할 때 onAuthStateChanged를 사용하여 사용자에 대한 데이터를 쿼리하는 것입니다.

다음은 Firebase 인증을 처리하는 맞춤 서비스의 예시 코드 스니펫입니다.

모든 설정은 컨텍스트의 일부이며 모두 useState입니다.

const subscribeToAuthChanges = (
  핸들인증변경,
  세트로딩상태,
  setUserRole,
  이메일 설정,
  setFirstName,
  세트활성화,
  설정성,
  세트 위치,
  사용자 ID 설정
) =>
  onAuthStateChanged(auth, (사용자) => {
    if (사용자) {
      handlerAuthChange(사용자);

      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 = getDoc(docRef)을 기다립니다;
  if (docSnap.exists()) {
    docSnap.data()를 반환합니다.
  } 또 다른 {
    null을 반환;
  }
};

이것은 useEffect 내에서 실행되어서는 안 됩니다. 컨텍스트는 이를 처리하기 위해 생성되었습니다.

import React, { useState } from "react";
"../Services/FirebaseAuthService"에서 FirebaseAuthService를 가져옵니다.

const FirebaseAuth = React.createContext({
  사용자: null,
  로드 중: 사실,
  역할: "",
  이메일: "",
  이름: "",
  isActive: 거짓,
  성: "",
  위치: "",
  사용자ID: "",
});

const FirebaseAuthProvider = ({ 하위 }) => {
  const [사용자, setUser] = useState(null);
  const [role, setRole] = useState(null);
  const [이메일, 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);

  FirebaseAuthService.subscribeToAuthChanges(
    세트사용자,
    세트로드 중,
    역할 설정,
    이메일 설정,
    setFirstName,
    세트활성화,
    설정성,
    세트 위치,
    사용자 ID 설정
  );

  반품 (
    <FirebaseAuth.Provider
      값={{
        사용자,
        로딩,
        역할,
        이메일,
        이름,
        성,
        활성,
        위치,
        사용자ID,
      }}
    >
      {어린이들}
    </FirebaseAuth.Provider>
  );
};

기본 FirebaseAuth 내보내기;

여기에는 这个例子中，我缺少一个查询字符串数组的设置函数，然而，以任何方式查询该数组書会导致onAuthStateChanged() 不断循环，反复向Firebase가 출시된 제품입니다.

유유한법이 없습니다.

저희는 이를 통해 소통하고 있습니다.

Answer 1

루프가 실행되는 이유는 부작용에서 onAuthStateChanged()를 설정하지 않았기 때문입니다. 다음을 시도해 보세요

으아악