如何在反应中对 Firestore 数据进行分页？

Question

所以我一直在开发类似于 Instagram 的网络应用程序，我正在尝试对来自 firestore 的数据（帖子）进行分页，我尝试了下面的代码，但在调用函数 loadMorePosts 时它只显示接下来的两个 @987654323 @不保留以前的新帖子

问题一：为什么在loadMorePosts函数中设置帖子的时候不保留之前的新帖子？ 我尝试应用扩展运算符，但没有帮助

setPosts(...posts,
          snapShot.docs.map((doc) => ({ id: doc.id, post: doc.data() }))
        );

问题2：为什么snapShot.docs[snapShot.docs.length - 1]是一个对象，不应该是一个数字吗？

问题 3：如何知道没有更多帖子可以获取？

代码：

 const [posts, setPosts] = useState([]);
 const [latestDoc, setLatestDoc] = useState(null);

  const test = [];
  useEffect(() => {
    const unsub = db
      .collection("posts")
      .orderBy("timestamp", "desc")
      .limit(2)
      .onSnapshot((snapShot) => {
        setPosts(
          snapShot.docs.map((doc) => ({ id: doc.id, post: doc.data() }))
        );

    setLatestDoc(snapShot.docs[snapShot.docs.length - 1]);
      });

    return unsub;
  }, []);

  const loadMorePosts = async () => {
    db.collection("posts")
      .orderBy("timestamp", "desc")
      .startAfter(latestDoc)
      .limit(2)
      .onSnapshot((snapShot) => {
        setPosts(
          snapShot.docs.map((doc) => ({ id: doc.id, post: doc.data() }))
        );
        setLatestDoc(snapShot.docs[snapShot.docs.length - 1]);
      });
    console.log(test);
    console.log(latestDoc);
  };

Answer 1

问题一：为什么在函数loadMorePosts中设置帖子时不保留之前的新帖子？ 因为 post 是一个数组，所以必须这样做：

setPosts([...posts,
      ...snapShot.docs.map((doc) => ({ id: doc.id, post: doc.data() }))
    ]);

问题 2：为什么 snapShot.docs[snapShot.docs.length - 1] 是一个对象，不应该是一个数字吗？
明明是对象，怎么可能是数字？
喜欢：

snapShot.docs = [ {object 1}, {object 2}, {object 3} ]
snapShot.docs[snapShot.docs.length - 1] = snapShot.docs[2] = {object 3}

问题 3：如何知道没有更多帖子可以获取？

你可以这样做：

const [ hasMore, setHasMore ] = useState(false);
setHasMore(snapShot.docs.length > 0);