如何从 Firestore 加载更多点击数据答案

【问题标题】：How to load more data on click from Firestore如何从 Firestore 加载更多点击数据
【发布时间】：2022-01-01 21:16:36
【问题描述】：

我正在从具有数据限制的 Firestore 中获取数据。在底部，我有一个链接到函数 FetchMore 的按钮，当我单击该按钮时，我希望加载更多数据并将其添加到 ElectroniquePosts 状态

Feed.js

function Feed() {
  const [ElectroniquePosts, setElectroniquePosts] = useState([]);
  const countRef = useRef(null);

  useEffect(() => {
    const unsubscribe = onSnapshot(
      query(
        collection(db, "ElectroniquePosts"),
        orderBy("timestamp", "desc"),
        limit(1)
      ),
      (snapshot) => {
        setElectroniquePosts(snapshot.docs);
      }
    );
    return () => {
      unsubscribe();
    };
  }, [db]);

  countRef.current = ElectroniquePosts.length;
  console.log("Number of docs : " + countRef.current);

  const FetchMore = (e) => {
    e.preventDefault();

    const unsubscribe = () =>
      onSnapshot(
        query(
          collection(db, "ElectroniquePosts"),
          orderBy("timestamp", "desc"),
          startAfter(countRef.current),
          limit(1)
        ),
        (snapshot) => {
          setElectroniquePosts(snapshot.docs);
        }
      );
    return unsubscribe();
  };

  return (
    <>
      {ElectroniquePosts.length === 0 ? (
        <div> </div>
      ) : (
        <>
          <div className="pb-20 flex flex-wrap justify-center "> </div>
          <div >
            <button onClick={FetchMore}>Load More </button>
          </div>
        </>
      )}
    </>
  );
}

export default Feed;

【问题讨论】：

嗨@Laspeed，您能否检查一下documentation，看看是否是您要找的东西。

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

使用下面的Reference，我想出了一个工作代码，这就是它现在的样子

Feed.js

  const FetchMore = async () => {
    const FetchMoreElectronique = async () => {
      const first = query(
        collection(db, "ElectroniquePosts"),
        orderBy("timestamp", "desc"),
        limit(ElectroniquePosts.length)
      );
      const documentSnapshots = await getDocs(first);

      const lastVisible =
        documentSnapshots.docs[documentSnapshots.docs.length - 1];

      const next = query(
        collection(db, "ElectroniquePosts"),
        orderBy("timestamp", "desc"),
        startAt(lastVisible),
        limit(2)
      );
      const DocSnapshotNext = await getDocs(next);
      setElectroniquePosts(DocSnapshotNext.docs);
    };
    FetchMoreElectronique();
  };

【讨论】：