Javascript React-连接两个获取请求

我被困在处理反冲阵法中

  useEffect(() => {
  
//   setLoading(true)
    const unsubscribe = firebase
      .firestore()
      .collection("events").where("eventowner", "==", `${currentUser.claims.group}`)
      .onSnapshot((snapshot) => {
        const data = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setEvents(data);
      });    
  }, [currentUser]);
  console.log(events)

以上内容获取我的活动…然后我获取活动的预订，以便知道谁会来

useEffect(() => {

    const unsubscribe = firebase
      .firestore()
      .collection("purchases").where("EventID", "==", `${eventsrefid}[LOOP HERE...>ID1...ID2....ID3]`)
      .onSnapshot((snapshot) => {
        const data = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setBookings(data)
        console.log(bookings)
      });
    
  }, [events]);
  
console.log(bookings)

我想做的是使用第一个获取请求中的数组…我想循环使用这个数组，在它下面得到一个用于销售代理的嵌套div>最后是一个预订列表

我只是不知道如何在选择器内部循环，因为我正在使用选择器的三个数组

在excel中，我将使用SUMIFs函数，该函数允许我使用两个变量……我如何使此选择器显示事件的div，在事件中是作为列的代理列表，在每列的旁边是代理的预订列表。单击事件左侧的sdie可更改中心视图