我的 React 项目中 Firestore 数据库的读取次数非常多

Question

我正在使用 React 和 firebase/firestore 制作一个简单的 CRUD 应用程序。

我目前有一组“产品”，有四条记录。

主页循环显示产品：

import React, { useEffect, useState } from 'react'
import { getDocs, collection } from "firebase/firestore"
import { db } from "../firebase-config"

const Home = () => {
  const [products, setProducts] = useState([])

  const productsCollectionRef = collection(db, "products") 

  useEffect(() => {
    const getProducts = async () =>{
      const data = await getDocs(productsCollectionRef)
      setProducts(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
    }

    getProducts()
  })

  return (
    <div>
      {products.map((product) => {
        return(
          <div>
            <div>{product.name}</div>
            <div>{product.sku}</div><br />
          </div>
        )
      })}
    </div>
  )
}

export default Home

我玩这个应用程序还不到一个小时，大概刷新了 10-20 次，一小时内读取次数从 30 左右跃升至现在的 35,000 以上。

起初，我以为这个简单的应用程序每天可以读取 50,000 次免费文档，但它到底是如何达到 35k+ 的呢？

我让这个页面在那里呆了一个小时，没有做任何事情，但这个数字仍然在迅速增加。

知道我能做些什么来改变这个吗？

非常感谢您的建议！

如果您需要任何其他信息，请告诉我...

Answer 1

这是由您的 useEffect 没有依赖项数组引起的。

当未提供依赖项数组时，useEffect 将在每个渲染上运行。在 useEffect 中，您更新一个状态，该状态会触发渲染，而渲染又会触发 useEffect 创建无限的重新渲染循环。

通过向 useEffect 提供一个空的依赖项数组来修复此问题，使其仅运行一次。

  useEffect(() => {
    const getProducts = async () =>{
      const data = await getDocs(productsCollectionRef)
      setProducts(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
    }

    getProducts()
  }, [])