Firestore - двойная визуализация и бесконечный цикл при использовании useState

#javascript #reactjs #firebase #google-cloud-firestore

#javascript #reactjs #firebase #google-облако-firestore

Вопрос:

Мне нужна некоторая помощь с React и Firestore.
Каким-то образом, когда я получаю данные из firestore и регистрирую их в консоли, данные регистрируются дважды. И когда я присваиваю данные из firestore переменной blog с помощью useState, вся функция переходит в бесконечный цикл.

Вот код:

 import React, { useState, useEffect } from 'react';
import { projectFirestore } from '../../firebase/config';

const Blogs = () => {
    const [blog, setBlog] = useState([])

    useEffect(() => {
        projectFirestore
        .collection("Blogs")
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach((doc) => {
                const data = doc.data()
                console.log(data)

            });
        });
    }, [blog])



    return (
        <div>
            Blogs
        </div>
    )
}
export default Blogs

Любые предложения о том, почему данные продолжают дважды регистрироваться в журнале и почему они продолжают попадать в бесконечный цикл, когда я пытаюсь использовать useState? Спасибо за любую помощь

1. Удалите переменную blog из массива зависимостей useEffect, потому что эффект запускается при первом рендеринге и переводит данные блога в состояние, но если вы поместите блог в массив зависимостей, эффект будет перезапущен на страницах блога, и вы получите цикл inf, потому что эффект устанавливает состояние,состояние меняется и снова.

2. Я удалил его и остался прежним.

3. Вы получаете бесконечный цикл или двойной журнал? Кстати, я не вижу метод setBlog (data).

4. setBlog(данные) должен идти сразу после console.log(данные). Двойной журнал был устранен с помощью эффекта useEffect, я просто забыл упомянуть об этом. Моя вина.

5. не могли бы вы тогда решить проблему?

Ответ №1:

В этой форме вы не должны получать бесконечный цикл в useEffect.

 const [blog, setBlog] = useState<Array<{}>>([])

useEffect(() => {
        projectFirestore
        .collection("Blogs")
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach((doc) => {
                const data = doc.data()
                console.log(data)
                setBlog(prevState => [...prevState, data])
            });
        });
    }, [])