如何避免我的 querysnapshot.foreach 上的循环？

Question

我的用户有 2 个团队：

• 舞蹈
• 柔道

在我的子集 "membersList" 中，Danse 团队有 1 个好友请求，而柔道则没有。

所以我想我的屏幕上只有一个请求。但是当我有 2 个或更多团队时，while 会继续循环，并且请求会显示团队的数量。

我认为问题出在我的 querySnaphost.forEach 上，但在我的控制台上，他返回给我的文档不是空的（所以团队 danse ）和另一个找不到文档的文档。

let fetch = async () => {
    firestore()
      .collection("Teams")
      .where("uid", "==", await AsyncStorage.getItem("userID"))
      .get()
      .then((querySnapshot) => {
        if (querySnapshot.empty) {
          console.log("no documents found");
        } else {
          querySnapshot.forEach((doc) => {
            let Teams = doc._data;
            console.log(Teams);
            updateActivity((arr) => [...arr, Teams]);
            console.log(Activity);

            doc.ref
              .collection("membersList")
              .where("statut", "==", "en attente")
              .get()
              .then((querySnapshot) => {
                if (querySnapshot.empty) {
                  console.log("no documents found cc");
                } else {
                  querySnapshot.forEach((doc) => {
                    let members = doc._data;
                    console.log("aa", members);
                    updateMembersList((arr) => [...arr, members]);
                    console.log("cc", MembersList);
                  });
                }
              });
          });
        }
      });
  };
  useEffect(() => {
    fetch();
  }, []);

以下是调用fetch() 时记录的内容：

{"Activity": "Danse", "Adress": "Plage", "City": "Nice", "Owner": true, "members": "3", "text": "bouh", "tokenTeam": "n5ounxsf2bq", "uid": "PTbEn2fba0QudXI8JE8RioQ9of53"}
[]
no documents found cc

Answer 1

你不应该将你的函数命名为fetch，因为这是一个reserved global function，你应该像undefined一样对待它——不要给它分配任何东西。我还建议在适用的情况下使用const 而不是let。

注意：此答案使用this answer 中描述的相同策略。

const fetchMemberRequests = async () => {
  const userTeamsQuerySnapshot = await firestore()
    .collection("Teams")
    .where("uid", "==", await AsyncStorage.getItem("userID"))
    .get();

  if (userTeamsQuerySnapshot.empty) {
    console.log("User owns no teams.");

    // empty Activity & MembersLists
    updateActivity([]);
    updateMembersList([]);
    return;
  }
  
  // for each team, fetch the pending requests and return a { team, memberRequests } object
  const fetchMemberRequestsPromises = userTeamsQuerySnapshot.docs
    .map(async (teamDocSnapshot) => {
      const teamData = teamDocSnapshot.data();
      
      const memberRequestsQuerySnapshot = await teamDocSnapshot.ref
        .collection("membersList")
        .where("statut", "==", "en attente")
        .get();
        
      if (memberRequestsQuerySnapshot.empty) {
        console.log(`Activity ${teamData.Activity} has no pending requests.`);
        return {
          team: teamData,
          memberRequests: []
        }
      }
      
      const memberRequestsArray = memberRequestsQuerySnapshot.docs
        .map((memberRequestDocSnapshot) => memberRequestDocSnapshot.data());
        
      console.log(`Activity ${teamData.Activity} has ${memberRequestsArray.length} pending requests.`);
      return {
        team: teamData,
        memberRequests: memberRequestsArray
      }
    });
    
  const memberRequests = await Promise.all(fetchMemberRequestsPromises);
  
  // memberRequests is an array of { team: teamData, memberRequests: arrayOfMembers }
  // which could be used to show the requests in groups
  
  // these lines replicate your current code:
  const allTeams = [];
  const allMemberRequests = [];
  for (const request of memberRequests) {
    allTeams.push(request.team);
    allMemberRequests.push(...request.memberRequests); // note: spreads array
  }
  
  console.log(`User owns ${allTeams.length} teams, with a total of ${allMemberRequests.length} pending requests.`);
  
  // replace Activity and MembersList rather than append to them
  updateActivity(allTeams);
  updateMembersList(allMemberRequests);
}

Answer 2

您正在循环内重复使用循环中的变量（querySnapshot 和 doc），所以我认为这会搞砸一切。如果你在 querySnapshot 上循环，那么你不应该在循环内再次重用 querySnapshot。

此外，为避免头痛和回调地狱，请使用 await 而不是 .then( .then( .then( .then())))。您不能在方法（.filter()、.map()、.forEach() 等）中使用await，但可以在for 循环中使用它：

let fetch = async () => {

    const querySnapshot = await firestore()
        .collection("Teams")
        .where("uid", "==", await AsyncStorage.getItem("userID"))
        .get();

    if (querySnapshot.empty) {
        console.log("no documents found");
        return;
    }

    for( let doc of querySnapshot.docs){

        let Teams = doc._data;
        console.log(Teams);
        updateActivity((arr) => [...arr, Teams]);
        console.log(Activity);

        let querySnapshot2 = await doc.ref
            .collection("membersList")
            .where("statut", "==", "en attente")
            .get();

        if (querySnapshot2.empty) {
            console.log("no documents found");
            continue;
        }

        for(let doc2 of querySnapshot2.docs){
            let members = doc2._data;
            console.log("aa", members);
            updateMembersList( arr => [...arr, members]);
            console.log("cc", MembersList);
        }
    }
}