Firestore读取的数据过多Ionic ReactReactJS

如何解决Firestore读取的数据过多Ionic ReactReactJS

所以我有一个使用Ionic React和Cloud Firestore作为数据库的应用程序。通常，我使用以下代码来检索数据：

const [teacher,setTeacher] = useState('');
const history = useHistory();
const [users,setUsers] = useState([{}]);

async function obtainData() {
    const querySnapshot = db.collection('TEACHER_DATA').where('email','==',Cookies.get('email'));
    const awaitSnapshot = await querySnapshot.get();
    const data = awaitSnapshot.docs.map(doc => doc.data().name);
    setTeacher(String(data));

    const querySnapshot2 = db.collection('CLASS').where('class_teacher',teacher);
    const awaitSnapshot2 = await querySnapshot2.get();
    const data2 = awaitSnapshot2.docs.map(doc => doc.data());
    setUsers(data2);
}

obtainData();

return (
    <div>{
        users.map((value: any,index) => (
                <IonCard key={index} onClick={() => {
                    Cookies2.set('id',value.student_id);
                    history.push({
                        pathname: '/Student_biodata',state: value.student_id
                    })
                  }} class="students">
                      <IonCardTitle>
                          {value.class_student}
                      </IonCardTitle>
                    {value.branch}
                    <IonCard id="mini-picture">
                        <IonImg src={'/assets/propic/' + value.student_id + '.jpg'}></IonImg>
                    </IonCard>
                    
                </IonCard>
            ))}
    </div>
);

此代码显示了我需要的数据。但是，当我检查Firestore使用情况时，它在15分钟内已经读取了6K。如果某天用户数在增加，这是不合适的。我的应用将立即达到每日限额配额。我的Firestore项目中的文档少于30个。

我有什么解决方案可以减少Firestore中的读取？是否有任何示例可以在Nosql Firestore中提供更好的结构以减少读取？ 我已经看过Firebase提供的有关Firestore的教程视频，但仍然听不懂。

解决方法

没有一种特定的最佳方法来减少Firestore中的读取，因为这完全取决于您的应用程序。例如，对于Android，iOS和Web应用程序，Firestore支持offline data，因此您可以缓存数据以供使用，而不必每次都执行get和访问数据库-您可以获取示例here

总而言之，没有更好或正确的方法来构建数据库或查询，因为它们需要满足您的需求以及您对应用程序的需求，因此，它始终取决于。考虑到这一点，我建议您看一下上面提到的链接以及类似的情况here，在这里您可以找到一些缓存数据的示例，以减少数据库中的读取，就像您的应用程序一样， where子句与静态值进行比较。

,

问题是您在页面的每个渲染上都调用obtainData，而不是在页面加载时调用一次。您可以使用useEffect来类似于componentDidMount

useEffect(()=>{
  obtainData();
},[]);

请参阅有关有条件触发效果的文档，如果您希望仅在其中一个参数更改时才进行调用，则可能需要 https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect