Me estoy mojando los pies con firebase y en el desarrollo inicial, de repente aparece un error:
FirebaseError: Cuota excedida.
Por contexto, estoy construyendo un blog simple en React. Dice que el problema de lectura de mi función está en "getPosts()":
import { useEffect, useState } from 'react'; import { getDocs, collection } from 'firebase/firestore'; import { db } from '../firebase-config'; import './Home.css'; const Home = () => { const [postList, setPostList] = useState([]); const postCollectionRef = collection(db, 'posts'); useEffect(() => { const getPosts = async () => { const data = await getDocs(postCollectionRef); setPostList(data.docs.map(doc => ({ ...doc.data(), id: doc.id }))); }; getPosts(); }); return ( <div className="homePage"> {postList.map(post => { return ( <div className="post"> <div className='postHeader'> <div className='post-title'><h1>{post.title}</h1></div> <div className='post-author'><h5>{post.author.name}</h5></div> </div> <div className='post-content'>{post.postText}</div> </div> ); })} </div> ); }; export default Home;Entonces, mientras busco en la configuración, encuentro este gráfico que me confunde por completo. Quizás alguien pueda decirme qué pasó aquí.
Gráfico que muestra lecturas que aumentan 54k a la vez.
¿El mapeo sobre los datos de esta manera acumula 50k lecturas a la vez de alguna manera?
Su useEffect no tiene una matriz de dependencia, por lo que se activará indefinidamente. Agregue una matriz de dependencia vacía al final de su useEffect para activarlo solo en el montaje.
useEffect(() => { (async () => { const { docs } = await getDocs(postCollectionRef); setPostList(docs.map(doc => ({ ...doc.data(), id: doc.id }))); })(); }, []);Obtenga más información al respecto aquí