无法在 Firestore 中获取前 5 个值（我阅读了文档，但仍然很混乱）

Question

当点击上一个按钮时，我需要获取前5个值，在当前项目中我使用Firestore，recoil，react和material UI，下面是我在查找教程时想到的代码。

传感器组件：

const itemsPerPage = 5; // basically page size


React.useEffect(() => {
  let isMounted = true;
  setLoading(true);
    
  const initialPageQuery = query(
      collection(db, ENV, VERSION, "facilities", facilityId, "sensors"),
      where("active", "==", true),
      orderBy("active"),
      limit(itemsPerPage)
  );
    
  getDocs(initialPageQuery)
      .then(querySnapshot => {
              setLoading(false);
              const data = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
              setSensors(data);
    
              // Set both firstDoc and lastDoc after fetching initial data
              const firstDoc = querySnapshot.docs[0];
              const lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];
              setFirstDoc(firstDoc);
              setLastDoc(lastDoc);
          })
      .catch(error => {
            setLoading(false);
            console.error(error);
      });
    
      return () => {
          isMounted = false;
      };
  }, [facilityId]);

// Function to fetch more data when the "Load More" button is clicked
const fetchMoreData = async () => {
    setLoading(true);

    // Query Firestore for the next page using the last document as the starting point
    const nextPageQuery = query(
            collection(db, ENV, VERSION, "facilities", facilityId, "sensors"),
            where("active", "==", true),
            orderBy("active"),
            startAfter(lastDoc),
            limit(itemsPerPage)
        );

    try {
        const querySnapshot = await getDocs(nextPageQuery);
        const newData = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));

        // Replace the existing data with the new data
        setSensors(newData);

        // Update the last document for the next fetch
        const lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];
        setLastDoc(lastDoc);
        setLoading(false);
    } catch (error) {
        setLoading(false);
        console.error(error);
    }
};

const fetchprev = async () => {
    setLoading(true);
    
    const prevPageQuery = query(
            collection(db, ENV, VERSION, "facilities", facilityId, "sensors"),
            where("active", "==", true),
            orderBy("active"),
            endBefore(firstDoc), // Use firstDoc as the parameter
            limit(itemsPerPage)
    );
    
    console.log("Fetching previous page...");
    
    try {
        const querySnapshot = await getDocs(prevPageQuery);
        const prevData = querySnapshot.docs.map(doc => ({ ...doc.data(), id: doc.id }));
    
        console.log("Previous data:", prevData);
    
        // Update firstDoc for the next fetch
        if (querySnapshot.docs.length > 0) {
            const firstDoc = querySnapshot.docs - prevData;
            console.log("First document after fetch:", firstDoc);
            setFirstDoc(firstDoc);
        }
    
        setSensors(prevData);
        setLoading(false);
    } catch (error) {
        setLoading(false);
        console.error("Error fetching previous data:", error);
    }
};

我只是尝试将最后一页添加为光标的引用，以便将其与 Firebase 提供的 endBefore 方法一起使用，但仍然无法获取值，继续前进并获取接下来的 5 个条目不是问题。

Answer 1

向后分页时，您需要使用

limitToList(itemsPerPage)

而不是

limit(itemsPerPage)

。