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更改时都会加载。

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

Answer 1

我认为问题的原因是我正在使用一种用于数据获取一次的方法。即使我在@Override protected void run() { for (;;) { Runnable task = takeTask(); if (task != null) { task.run(); // [...] } [...]函数中使用了它，我也认为我正在标记Firebase端点。

解决方案（我想，我是个初学者）是将Firestore快照管理为mentioned in the docs。

实际上，我通过使用react-firebase-hooks来解决该问题，该方法将数据处理抽象化了。

我仍然希望在useEffect API中从头开始就如何适当地做到这一点的答案。

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

1 个答案: