多次执行 Firestore“get”函数

Question

我是 React-Native 和 Firebase 的新手，我正在为一个项目使用Firebase Cloud Firestore 。我正在尝试静态地从数据库中获取过滤数据（因为我现在正在学习使用它），但是我的函数以某种方式被执行了多次，读数的数量正在迅速增加并且我遇到了一些随机错误也。我想知道出了什么问题。

这是我只处理数据库 (Firestore.js) 的文件的代码：

import React, { useState, useEffect } from "react";

import { ActivityIndicator } from "react-native";

import * as firebase from "firebase";

import "firebase/firestore";

function onResult(QuerySnapshot) {

  console.log("Pegamos a coleção de Animais.");

}

function onError(error) {

  console.error(error);

}

export function GetAnimalsByEspecie(especie) {

  const [loading, setLoading] = useState(true);

  const [animais, setAnimais] = useState([]);

  console.log("entrou Especie");

  const subscriber = firebase

    .firestore()

    .collection("Animal")

    .where("especie", "==", especie)

    .get()

    .then((querySnapshot) => {

      const animaisList = [];

      querySnapshot.forEach((documentSnapshot) => {

        animaisList.push({

          ...documentSnapshot.data(),

          key: documentSnapshot.id,

        });

      });

      setAnimais(animaisList);

      setLoading(false);

    });

  if (loading) {

    console.log("loading");

    return <ActivityIndicator />;

  }

  return animais;

}

export function GetAnimalsByNome(nomeAnimal) {

  const [loading, setLoading] = useState(true);

  const [animais, setAnimais] = useState([]);

  console.log("entrou nome nooome");

  const subscriber = firebase

    .firestore()

    .collection("Animal")

    .where("nome", "==", nomeAnimal)

    .get()

    .then((querySnapshot) => {

      const animaisList = [];

      querySnapshot.forEach((documentSnapshot) => {

        animaisList.push({

          ...documentSnapshot.data(),

          key: documentSnapshot.id,

        });

      });

      setAnimais(animaisList);

      setLoading(false);

    });

  if (loading) {

    console.log("loading");

    return <ActivityIndicator />;

  }

  return animais;

}

Answer 1

您应该将提取放在 a 中useEffect，这样您就可以让它只运行一次。否则，当您的提取回调设置状态时，您将重新呈现，并且您的提取代码将再次运行。此外，它看起来像 GetAnimalsByEspecie，因为它调用了钩子，所以它本身应该是一个钩子。例如：export function useAnimalsByEspecie(especie) {&nbsp; const [loading, setLoading] = useState(true);&nbsp; const [animais, setAnimais] = useState([]);&nbsp; useEffect(() => {&nbsp; &nbsp; const subscriber = firebase&nbsp; &nbsp; &nbsp; .firestore()&nbsp; &nbsp; &nbsp; .collection("Animal")&nbsp; &nbsp; &nbsp; .where("especie", "==", especie)&nbsp; &nbsp; &nbsp; .get()&nbsp; &nbsp; &nbsp; .then((querySnapshot) => {&nbsp; &nbsp; &nbsp; &nbsp; const animaisList = [];&nbsp; &nbsp; &nbsp; &nbsp; querySnapshot.forEach((documentSnapshot) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animaisList.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...documentSnapshot.data(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key: documentSnapshot.id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; setAnimais(animaisList);&nbsp; &nbsp; &nbsp; &nbsp; setLoading(false);&nbsp; &nbsp; &nbsp; });&nbsp; }, [especie]);&nbsp; return [animais, loading];}...可以像这样使用：function Animais() {&nbsp; var [animais, isLoading] = useAnimalsByEspecie('shitzu');&nbsp; const search = () => {&nbsp; &nbsp; const [searchQuery, setSearchQuery] = useState("");&nbsp; &nbsp; return (&nbsp; &nbsp; <SearchBar&nbsp; &nbsp; &nbsp; placeholder="Escreva aqui..."&nbsp; &nbsp; &nbsp; onChangeText={""}&nbsp; &nbsp; &nbsp; value={searchQuery}&nbsp; &nbsp; />)&nbsp; };&nbsp; if (isLoading) {&nbsp; &nbsp; return <ActivityIndicator />;&nbsp; }&nbsp; return (&nbsp; &nbsp; <SafeAreaView style={{ flex: 1 }}>&nbsp; &nbsp; &nbsp; <FocusAwareStatusBar barStyle="light-content" backgroundColor="#88c9bf" />&nbsp; &nbsp; &nbsp; <KeyboardAvoidingView style={styles.background}>&nbsp; &nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>Animais</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <FlatList&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ListHeaderComponent={''}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={animais}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={({ item }) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 50,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 350,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alignItems: "center",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justifyContent: "center",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>Animal ID: {item.id}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>Animal Name: {item.nome}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; </KeyboardAvoidingView>&nbsp; &nbsp; </SafeAreaView>&nbsp; );}