我的 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()
  }, [])