Firestore - 使用 useState 时双重渲染和无限循环答案

【问题标题】：Firestore - Double render and infinite loop while using useStateFirestore - 使用 useState 时双重渲染和无限循环
【发布时间】：2021-03-29 12:57:01
【问题描述】：

我需要一些关于 React 和 Firestore 的帮助。
不知何故，当我从 firestore 获取数据并将其记录到控制台时，数据被记录了两次。而当我用 useState 将 firestore 中的数据分配给 blog 变量时，整个函数就会跳入一个无限循环。

代码如下：

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 时它不断进入无限循环的任何建议？感谢您的帮助

【问题讨论】：

从 useEffect 依赖数组中删除 blog 变量，因为效果会在第一次渲染时运行，并将在博客数据中设置为状态，但是我将博客放入依赖数组中，效果会重新运行在 blog chages 上，你得到一个 inf 循环，导致 effetct 设置状态，状态再次更改。
我删了还是一样。
你得到无限循环还是双对数？顺便说一句，我看不到 setBlog(data) 方法。
setBlog(data) 应该紧跟在 console.log(data) 之后。使用 useEffect 消除了双重对数，我只是忘了提及这一点。我的错。
那你能解决这个问题吗？

标签： javascript reactjs firebase google-cloud-firestore

【解决方案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])
            });
        });
    }, [])

【讨论】：