在使用React的实时重新加载时如何避免超出Firestore配额？

Question

我还很陌生，所以如果这是一个基本问题，我深表歉意。我曾尝试在堆栈溢出，谷歌和Github上查找错误，但没有看到很多寻找该错误或笼统术语的帖子-而且我发现的帖子都没有帮助或直接相关。

我正在使用Firebase的身份验证和Firestore服务。使用身份验证服务没有任何麻烦（就达到每日限制而言），但是，我一直在一个小时内达到Firebase配额。这是我看到的错误：

Unhandled Rejection (FirebaseError): Quota exceeded.

我想知道是导致这些过多读取的代码，还是可能是另一个原因，例如react live re-load重载了我所做的每一个小改动，都会触发读取。

该应用当前从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;

以上组件在应用程序的根目录完整显示（如果用户未登录，则将他们重定向到登录页面）。>>

据我所知，useEffect方法是在第一次安装组件时加载的，每次posts或currentUser都更改。

我暗中怀疑我做的事很愚蠢，导致大量数据读取并导致此错误。

我还很陌生，所以如果这是一个基本问题，我深表歉意。我曾尝试在堆栈溢出，谷歌和Github上查找错误，但没有看到很多帖子在寻找错误或常规信息...

Answer 1

我认为问题的原因是，我正在使用一种用于数据获取一次的方法。即使我在useEffect函数中使用了它，我也认为我正在标记Firebase端点。