Reactjs 如何避免在使用React'时超过firestore配额；什么是活载？

我还没有反应过来，所以如果这是一个基本问题，我道歉。我试着在stack overflow、google和Github上查找错误，但没有看到很多文章查找错误或相关的一般术语，而且我发现没有一篇文章是有用的或直接相关的

我正在使用react与firebase的身份验证和firestore服务。我在使用身份验证服务时没有遇到任何问题（就达到每日限额而言），但是，我已经在一小时内达到了firebase配额。这就是我看到的错误：

未处理的拒绝（FirebaseError）：超出配额。

我想知道是否是代码导致了这些过度读取，或者是否还有其他罪魁祸首，比如react live Reload，它会为我所做的每一个小更改触发读取

该应用程序当前从firestore集合中读取一些数据并将其呈现到页面。下面是组件的外观：

import React, { useState, useEffect } from 'react';
import firebase from '../../lib/firebase';

import Navbar from '../Navbar';
import MainContainer from '../MainContainer';
import { PostView } from '../Post';

function Home({ currentUser }) {

  const [ posts, setPosts ] = useState([]);

  const signOutUser = () => firebase.auth().signOut();

  useEffect(() => {
    const userId = currentUser.uid;
    const db = firebase.firestore();
    const postsRef = db.collection('posts');
    const query = postsRef.where('userId', '==', userId);
    async function getData() {
      const data = await query.get();
      setPosts(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    }
    getData();
  }, [posts, currentUser]);

  return (
    <>
      <Navbar />
      <MainContainer>
        <button onClick={signOutUser}>Sign out</button>
        {posts.length === 0 ? <h1>No posts to display</h1> : '' }
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              <PostView post={post} />
            </li>
          ))}
        </ul>
      </MainContainer>
    </>
  )
}

export default Home;

import React，{useState，useffect}来自“React”；
从“../lib/firebase”导入firebase；
从“../Navbar”导入Navbar；
从“../maincainer”导入maincainer；
从“../Post”导入{PostView}；
函数主页（{currentUser}）{
const[posts，setPosts]=useState（[]）；
const signOutUser=（）=>firebase.auth（）.signOut（）；
useffect（（）=>{
const userId=currentUser.uid；
const db=firebase.firestore（）；
const postsRef=db.collection（'posts'）；
const query=postsRef.where（'userId'，'='，'userId'）；
异步函数getData（）{
const data=wait query.get（）；
setPosts（data.docs.map（doc=>（{…doc.data（），id:doc.id}））；
}
getData（）；
}，[posts，currentUser]）；
返回(
退出
{posts.length==0？没有要显示的帖子：“”

{posts.map（post=>(


))}

)
}
导出默认主页；

上述组件在应用程序的根目录下完整呈现（如果用户未登录，则会重定向到登录页面）

根据我的理解，

useffect

方法在第一次安装组件时加载，并且每次

posts

或

currentUser

更改时加载

---

我暗自怀疑我做了一些愚蠢的事情，导致了大量的数据读取并导致了这个错误

我认为问题的原因是，我使用的方法是一次数据获取。尽管我在

useffect

函数中使用它，但我想我一直在纠缠于firebase端点

解决方案（我想，我是react初学者）是将firestore快照管理为

实际上，我通过使用抽象的数据处理方法绕过了它

我仍然希望在

useffect

API中找到关于如何从零开始正确执行此操作的答案