如何使用React从Firebase fiRecovery中的子集合中的所有文档中获取数据？

Question

对于我的项目，我想从一个子集合中的所有文档中获取数据。并且这个子集合有多个文档。

为了澄清一下，这就是我的火力恢复的结构：我有一个事件集合，其中包含多个文档，doc.id是事件名称本身。每个事件文档都有几个字段和一个与会者子集合。在与会者子集合中，每个文档都包含有关与会者的详细信息。

我想浏览events集合中的所有文档，并从所有文档中获取关于与会者的数据。

我想在组件第一次渲染时显示这些数据。所以我调用了使用效果中的函数。这是我尝试过的：

const [attendeeInfo, setAttendeeInfo] = useState({});
    const [events, setEvents] = useState([]);

    const getEventsData = async () => {
        // first of all, we need the name of the user's org
        // fetch it from users collection by using the uid from auth
        const orgRef = doc(db, "users", auth["user"].uid);
        const orgSnap = await getDoc(orgRef);

        // now that we have the org name, use that to search events...
        // ...created by that org in events collection
        const eventsRef = collection(db, "events");
        const eventsQuery = query(eventsRef, where("createdBy", "==", orgSnap.data().orgName));
        const eventsQuerySnapshot = await getDocs(eventsQuery);
        let eventsInfo = [];

        eventsQuerySnapshot.forEach((doc) => {

            eventsInfo.push(doc.id);

        })

        setOrg(orgSnap.data().orgName);
        setEvents(eventsInfo);
    }

    const getAttendeesData = (events) => {
        console.log(events);
        let attendeeInformation = [];

        events.forEach(async (event) => {
            const attendeesRef = collection(db, "events", event, "attendees");
            const attendeesSnap = await getDocs(attendeesRef);

            attendeesSnap.forEach((doc) => {

                const isItMentor = doc.data().isMentor ? "Yes" : "No";
                const isItMentee = doc.data().isMentee ? "Yes" : "No";
                const attendeeData = {
                    name: doc.id,
                    mentor: isItMentor,
                    mentee: isItMentee,
                };

                attendeeInformation.push(attendeeData);
            })

        })

        // console.log(attendeeInformation);
        setAttendeeInfo(attendeeInformation);

    }


    useEffect(() => {

        getEventsData();
        // console.log(attendeeInfo);
        getAttendeesData(events);
    }, []);

然而，当我在我的attendeesData函数中控制台记录事件时，我得到一个空数组，这意味着事件状态变量还没有从前面的函数中更新。

有人能帮我解决这个吗？

Answer 1

这是一个时间问题。在第一次渲染时，您开始获取事件列表，但在使用它们之前，您不会等待它们被检索。此外，由于只在装载时运行此代码，因此当＜code＞事件＜/code＞最终更新时，＜code＞getAttendeesData＜/code＞将不会与更新的数组一起调用。

useEffect(() => {
    getEventsData(); // <-- queues and starts "fetch event IDs" action
    getAttendeesData(events); // <-- starts fetching attendees for `events`, which will still be an empty array
}, []); // <-- [] means run this code once, only when mounted

解决方案是拆分use效果，以便正确处理每个部分。

useEffect(() => {
    getEventsData(); // <-- queues and starts "fetch event IDs" action
}, []); // <-- [] means run this code once, only when mounted

useEffect(() => {
    getAttendeesData(events); // initially fetches attendees for an empty array, but is then called again when `events` is updated with data
}, [events]); // <-- [events] means run this code, when mounted or when `events` changes

接下来，您需要修复getAttendeesData，因为它有一个类似的问题，它最终会在它结束时使用另一个空数组（attendeeInformation）调用setAttendeeInfo（），因为您不会等待它首先填充数据。虽然此数组最终会正确填充数据，但当它填充时，它不会触发重新呈现以实际显示该数据。

const [attendeeInfo, setAttendeeInfo] = useState([]); // <-- should be an array not an object?
const [events, setEvents] = useState([]);

const getAttendeesData = async (events) => {
    console.log(events);

    const fetchAttendeesPromises = events.map(async (event) => {
        const attendeesRef = collection(db, "events", event, "attendees");
        const attendeesSnap = await getDocs(attendeesRef);
        const attendeeInformation = [];

        attendeesSnap.forEach((doc) => {
            const isItMentor = doc.data().isMentor ? "Yes" : "No";
            const isItMentee = doc.data().isMentee ? "Yes" : "No";
            const attendeeData = {
                name: doc.id,
                mentor: isItMentor,
                mentee: isItMentee,
            };

            attendeeInformation.push(attendeeData);
        })

        return attendeeInformation; // also consider { event, attendeeInformation }
    })

    // wait for all attendees to be fetched first!
    const attendeesForAllEvents = await Promises.all(fetchAttendeesPromises)
      .then(attendeeGroups => attendeeGroups.flat()); // and flatten to one array

    // console.log(attendeesForAllEvents);
    setAttendeeInfo(attendeesForAllEvents);
}

以基本且不完整的方式（见下文）应用这些变更，可得出：

// place these outside your component, they don't need to be recreated on each render
const getEventsData = async () => { /* ... */ }
const getAttendeesData = async (events) => { /* ... */ }

export const YourComponent = (props) => {
  const [attendeeInfo, setAttendeeInfo] = useState(null); // use null to signal "not yet loaded"
  const [events, setEvents] = useState(null); // use null to signal "not yet loaded"
  const loading = events === null || attendeeInfo === null;

  useEffect(() => {
    getEventsData();
  }, []);

  useEffect(() => {
    if (events !== null) // only call when data available
      getAttendeesData(events);
  }, [events]);

  // hide component until ready
  // consider rendering a spinner/throbber here while loading
  if (loading)
    return null;

  return (
    /* render content here */
  )
}

因为getEventsData（）和getAttendeesData（）是Promises，所以您应该使用useAsyncEffects实现，例如@react-ook/async和use-async-Effects，以便您可以处理任何中间状态，例如加载、不正确的身份验证、完成前卸载和其他错误（上述片段中未涵盖）。此线程包含有关此主题的更多详细信息。