javascript - 使用 react-infinite-scroll-component 的 Firestore 限制仅在给定限制下滚动

Question

我正在尝试使用 react-infinite-scroll-component 使用我的 firestore 文档列表创建无限滚动。我将限制设置为 5 以进行测试。无限滚动正在工作，但它只显示 5 个列表的给定限制:

目前我创建了 25 个不同的列表，我将 firestore 限制为一次显示 5 个:

list 1
list 2
list 3
list 4
list 5
loading more...

加载后它将加载相同的 5 个列表并且不加载新列表，并且还会在给定的 5 个限制下无限循环加载:

list 1
list 2
list 3
list 4
list 5
list 1
list 2
list 3
list 4
list 5
loading more...

下面是我获取查询的示例代码，我将其放在 useEffect 中，因为它位于用户页面和主页中的上下文提供程序包装中，两者都使用无限滚动:

 import InfiniteScroll from 'react-infinite-scroll-component';

 const [list, setList] = useState([]);
 const [last, setLast] = useState(null);


 useEffect(() => {

   firestoreList
    .orderBy('createdAt', "desc")
    .limit(5)
    .get()
    .then((querySnapshot) => {
       const lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];
       setLast(lastVisible.data());

       const postList = []
       querySnapshot.forEach((doc) => {
         postList.push(doc.data()); 
       })
       setList(postList);
    })
    .catch((err) => {
       console.log(err)
    })
  },[]};

这是获取数据的代码:

 const {list, last, setList } = ListContext(); 

 const fetchMoreData = () => {
    firestoreList
      .orderBy('createdAt', "desc")
      .startAfter(last)
      .limit(5)
      .get()
      .then(() => {
         setList(list.concat(list));
      })
      .catch((err) => {
         console.log(err)
      })
 };

对于 react-infinite-scroll-component:

   <InfiniteScroll
     dataLength={list.length}
     next={fetchMoreData}
     hasMore={true}
    >
       {list.map((a, i) => (
         <div key={i}>
           {a.allList}
         <div>
       ))}
   <InfiniteScroll>

如何正确设置限制并使其他列表出现并停止循环？

Answer 1

我现在终于让它工作了，我有了关于这个的想法 youtube channel ，我也 应该在我的 fetchMoreData 中定义了一个 lastVisible，并停止给出未定义错误的循环。

const {list, last, setList, setLast } = ListContext(); 

const [notify, setNotify] = useState(null);

const fetchMoreData = () => {
  const field = "createdAt";

  firestoreList
    .orderBy(field, "desc")
    .startAfter(last[field]) //from Fireship channel, which loads the next data
    .limit(5)
    .get()
    .then((querySnapshot) => {
       const lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1];

       const postList = []
       querySnapshot.forEach((doc) => {
         postList.push(doc.data());
       })

       if (lastVisible !== undefined) {
         setList([...list, ...postList]);
         setLast(lastVisible.data());

       } else {
         setNotify("nothing to load.");
         return;
       }

    })
    .catch((err) => {
      console.log(err)
    })
};

即使不使用“react-infinite-scroll-component”，它也可以工作，只需使用 useEffect。