多次执行 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) {

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

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

  useEffect(() => {

    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);

      });

  }, [especie]);

  return [animais, loading];

}

...可以像这样使用：

function Animais() {

  var [animais, isLoading] = useAnimalsByEspecie('shitzu');

  const search = () => {

    const [searchQuery, setSearchQuery] = useState("");

    return (

    <SearchBar

      placeholder="Escreva aqui..."

      onChangeText={""}

      value={searchQuery}

    />)

  };

  if (isLoading) {

    return <ActivityIndicator />;

  }

  return (

    <SafeAreaView style={{ flex: 1 }}>

      <FocusAwareStatusBar barStyle="light-content" backgroundColor="#88c9bf" />

      <KeyboardAvoidingView style={styles.background}>

        <View>

          <Text>Animais</Text>

          <FlatList

            ListHeaderComponent={''}

            data={animais}

            renderItem={({ item }) => (

              <View

                style={{

                  height: 50,

                  width: 350,

                  flex: 1,

                  alignItems: "center",

                  justifyContent: "center",

                }}

              >

                <Text>Animal ID: {item.id}</Text>

                <Text>Animal Name: {item.nome}</Text>

              </View>

            )}

          />

        </View>

      </KeyboardAvoidingView>

    </SafeAreaView>

  );

}