专门使用 Firestore forEach 进行异步/等待（React Native with Hooks）

Question

在继续执行其余代码之前，有人可以提供一些有关在 Firestore 集合中获取特定项目的指导吗？我想在遍历评论集合之前获取用户集合中的用户项目，据我所知，这最好通过使用 async/await 来实现，但是在我看到堆栈溢出和其他地方的任何地方，他们使用 setups/ 来实现它语法与我一直使用的完全不同。

这是我得到的：

import React, { useState, useEffect } from "react";
import { Image, Text, TextInput, TouchableOpacity, View } from "react-native";
import styles from "./model/AccountStyles.js";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import { firebase } from "../firebase/config";

export default function AccountScreen({navigation }) {

  const [existingReviewsArray, setExistingReviewsArray] = useState([]);
  
  useEffect(() => {
    let userID; 

    //get userID
    firebase.auth().onAuthStateChanged((user) => {
        const usersRef = firebase.firestore().collection("users"); 
        usersRef 
          .doc(user.uid)
          .get()
          .then((document) => {
            const data = document.data();
            userID = data.id 
          });
    });

    //get reviews made by userID to useState
    var addToReviewsArray = [];
    const reviewsRef = firebase.firestore().collection('reviews');
    reviewsRef.get().then((querySnapshot) => {
      querySnapshot.forEach(snapshot => {
          if (snapshot.data().userID == userID){
            var existingReview = snapshot.data(); 
            addToReviewsArray = ([...addToReviewsArray , existingReview]);          
          } 
      }
    )    
    setExistingReviewsArray(addToReviewsArray);
    });
    }, []); 

解决此问题的最佳方法是什么？在此不胜感激。

Answer 1

以下代码说明

useEffect 钩子在设计上是异步的，Firebase API 也是如此，所以我试图用这个例子清楚地说明如何实现反应式编程方法。我在这里不使用异步/等待模式。这也可能不是最好的做事方式——这只是我想到的第一件事。 :)

下面的代码“反应”到用户身份验证状态的变化，因为最初userId 是undefined：

const [userId, setUserId] = useState(); // this means userId is undefined

userId 变量填充在第一个 useEffect 中，它没有依赖项（空的[]），这意味着它应该只在组件安装时运行一次。

然后创建第二个useEffect 挂钩来监听userId 变量的变化，它运行一个函数，然后可以使用新填充的变量。

---

我会这样做。 :)

import { useState, useEffect } from "react";

export default function AccountScreen({ navigation }) {
  const [userId, setUserId] = useState();
  const [existingReviewsArray, setExistingReviewsArray] = useState([]);

  // Create a useEffect [with no dependencies] that runs once to get the userId
  useEffect(() => {
    firebase.auth().onAuthStateChanged((user) => {
      const usersRef = firebase.firestore().collection("users");
      usersRef
        .doc(user.uid)
        .get()
        .then((document) => {
          const data = document.data();

          // Use the set state hook here to trigger the second useEffect below
          setUserId(data.id);
        });
    });
  }, []);

  // Create a useEffect that is triggered whenever userId is changed
  useEffect(() => {
    // get reviews made by userID to useState
    var addToReviewsArray = [];
    const reviewsRef = firebase.firestore().collection("reviews");

    reviewsRef.get().then((querySnapshot) => {
      querySnapshot.forEach((snapshot) => {
        if (snapshot.data().userID == userID) {
          var existingReview = snapshot.data();
          addToReviewsArray = [...addToReviewsArray, existingReview];
        }
      });

      setExistingReviewsArray(addToReviewsArray);
    });
  }, [userId]);

  // Use your `existingReviewsArray` in the render
}