React Firebase startAfter() 查询未按预期工作

Question

我正在使用 Firebase Firestore 在 React 中进行无限分页。我有一个组件从我的 firestore 中获取有限的数据并将其附加到状态。最初，我只获取 5 条记录，然后触发相同的函数来获取上次获取的最后一条记录之后的下 5 条记录。

import './App.css';
import React,{useState,useEffect} from 'react';
import db from './firebase.config';

function App() {
  const [comments,setComments]=useState([])
  async function fetchData(){
    let latestDoc=comments[comments.length-1];
    console.log(latestDoc)
    const res=db.collection('comments')
      .orderBy("id")
      .startAfter(latestDoc || 0)
      .limit(5);
    const data=await res.get();
    console.log(data.docs)
    let temp=[];
    data.docs.forEach(item=>{
      const comment=item.data();
      temp.push(comment)
    })
    setComments([...comments,...temp])
  }

  useEffect(()=>{
    fetchData();
  },[])
  const LoadMoreData=()=>{
    fetchData();
  }
  return (
    <>
    <div className="container">
        {
          comments && comments.map(comment=>{
            if(comment)
            return(
              <div className="card" key={comment.id}>
                <h4>{comment.name}</h4>
                <p>{comment.email}</p>
                <p>{comment.postId}</p>
              </div>
            )
          })
        }
    </div>
    <div className="load">
      <button onClick={LoadMoreData}>Load More</button>
    </div>
    </>
  );
}

export default App;

当我单击“加载更多”时，最后一条记录正确存储在 latestDoc 中，但是 startAfter() 查询为我提供了一个空数组，而它不应该用于后续的提取。我的 firestore 数据不过是这个虚拟 API https://jsonplaceholder.typicode.com/comments 返回的所有评论。我做错了什么？为什么我的查询没有按预期运行？

Answer 1

.startAfter(latestDoc?latestDoc.id : 0)

以上更改对我有用。感谢@kunquan 指出。看起来您需要参考您在 orderBy 子句中使用的记录属性，在我的例子中是 id.

React Firebase startAfter() 查询未按预期工作

React Firebase startAfter() query not working as intended

infinite-scroll

firebase

reactjs