Случайное зацикливание функции React + Firebase - PullRequest
Новая
       6

Случайное зацикливание функции React + Firebase

1 голос
/ 05 мая 2020

Я понятия не имею, почему моя функция зацикливается, когда я использую useStates. Может ли кто-нибудь выяснить проблему. Он повторяется снова и снова, это то, что появляется в моем console.log внутри снимка 

`function Classtab() {
  const [userName, setuserName] = React.useState(null)
  const [userType, setuserType] = React.useState(null)
  const [userEmail, setuserEmail] = React.useState(null)
  const [userCourse, setuserCourse] = React.useState([])
  const [registeredCourse, setregisteredCourse] = React.useState([])
  firebase.auth().onAuthStateChanged((user) => {
    if(user){
        var db = firebase.firestore()
        db.collection('user').doc(user.uid)
            .get()
            .then(snapshot => {
                          setuserName( snapshot.data().name)
                          setuserType( snapshot.data().type)
                          setuserCourse( snapshot.data().course)
                          setuserEmail( user.email)
                          console.log(userCourse)
                userCourse.map(course => {
                  db.doc(course).get().then(
                        snapshot => {setregisteredCourse([...registeredCourse, snapshot.data().name])}
                        )
                      }
                    )
      }).catch(error => console.log(error))}else{}
    })
  return(...)`

1 Ответ

1 голос
/ 05 мая 2020

Вам нужно переместить ваш код авторизации в useEffect. Сейчас происходит то, что вы запускаете onAuthStateChanged при каждом рендеринге. И каждый раз, когда это возвращается, он вызывает новый рендеринг, заставляя его бесконечно добавлять новые подписки.

Я изменил ваш код, чтобы предотвратить бесконечные повторные рендеринга и позволить userCourse быть правильным значением в обещании. затем функция. Первоначально функция userCourse всегда должна была быть пустым массивом (из-за закрытия). 

function Classtab() {
  const [userName, setuserName] = React.useState(null);
  const [userType, setuserType] = React.useState(null);
  const [userEmail, setuserEmail] = React.useState(null);
  const [userCourse, setuserCourse] = React.useState([]);
  const [registeredCourse, setregisteredCourse] = React.useState([]);
  const registeredCourseRef = useRef(registeredCourse);
  useEffect(()=>{
    registeredCourseRef.current = registeredCourse;
  },[registeredCourse])
  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        var db = firebase.firestore();
        db.collection('user')
          .doc(user.uid)
          .get()
          .then((snapshot) => {
            setuserName(snapshot.data().name);
            setuserType(snapshot.data().type);
            const userCourse = snapshot.data().course;
            setuserCourse(userCourse);
            setuserEmail(user.email);
            console.log(userCourse);
            userCourse.map((course) => {
              db.doc(course)
                .get()
                .then((snapshot) => {
                  setregisteredCourse((registeredCourse)=>[
                    ...registeredCourse,
                    snapshot.data().name,
                  ]);
                });
            });
          })
          .catch((error) => console.log(error));
      } else {
      }
    });
    return () => {
      unsubscribe();
    };
  //Need to have registeredCourse in the dependency array
  //Or have it in a ref
  }, []);
  // return(...)
}
...