我正在使用 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+ 的呢?
我让这个页面在那里呆了一个小时,没有做任何事情,但这个数字仍然在迅速增加。
知道我能做些什么来改变这个吗?
非常感谢您的建议!
如果您需要任何其他信息,请告诉我...
这是由您的 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()
}, [])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)