亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

多次執行 Firestore“get”函數

多次執行 Firestore“get”函數

人到中年有點甜 2023-05-25 17:08:50
我是 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;}
查看完整描述

1 回答

?
烙印99

TA貢獻1829條經驗 獲得超13個贊

您應該將提取放在 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>

  );

}


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 100 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號