Firestore 读取过多数据 (Ionic React) (ReactJS)

Question

所以我有这个应用程序，它使用 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 Usage 时，它在 15 分钟内已经有 6K 读取。如果有一天用户数量增加，这是不合适的。我的应用程序很快就会达到每日限制配额。我的Firestore项目中的文档不到30个

有什么解决方案可以减少 Firestore 中的读取吗？是否有任何示例可以在 NoSQL Firestore 中构建更好的结构以减少读取？ 我看过 Firebase 关于 Firestore 的教程视频，但我还是不明白。

Answer 1

没有特定的最佳方法来减少 Firestore 中的读取，因为这完全取决于您的应用程序。例如，对于 Android、iOS 和 Web 应用，Firestore 支持 offline data, so you can cache your data for use, without having to perform get and access your database everytime - as you can get an example here.

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

Answer 2

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

的功能

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

如果您希望调用仅在其中一个参数发生变化时发生，请参阅有关有条件触发效果的文档 https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Firestore 读取过多数据 (Ionic React) (ReactJS)

Firestore reads too much data (Ionic React) (ReactJS)

reactjs

google-cloud-firestore

ionic-react