在Masonic和Firebase中如何使用useInfiniteLoader？ Next.js

问题描述

我试图从Firestore中获取URL列表，以砖石格式显示渲染图像，并在用户滚动到底部时自动加载更多内容，但是浏览器无休止地循环请求并耗尽我的Firebase配额。

我希望它在页面打开时首先加载第一组20张图像，而当我滚动到底部时仅加载另一组20张图像

我在此处（https://codesandbox.io/s/useinfiniteloader-example-vn30p?file=/src/index.js）复制了代码演示，并用firebase对其进行了修改，但效果不一样。

const ImageMasonry = () => {
   let itemSrc = []; 

  const getFakeItems = () => {
    projectFirestore
      .collection("image-data")
      .limit(20)
      .onSnapshot((snap) => {
        let documents = [];
        snap.forEach((doc) => {
          documents.push({ ...doc.data(),id: doc.id });
        });
      itemSrc.push(...documents);
    }); 

    return itemSrc;
  }

  const [items,setItems] = useState(getFakeItems);

  const getFakeItemsPromise = () =>{
    return Promise.resolve(getFakeItems());}

    const maybeLoadMore = useInfiniteLoader(
     async () => {
        const nextItems = await getFakeItemsPromise();
        setItems(current => [...current,...nextItems]);
      },{
        isItemloaded: (index,item) => !!item[index],minimumBatchSize: 32,threshold: 3
      }
    );


    return (
      <Masonry
        items={items}
        columnGutter={8}
        columnWidth={340}
        overscanBy={5}
        render={ImageCard}
        onRender={maybeLoadMore}

        className='focus:outline-none'
      />
    );
  };
  
  export default ImageMasonry;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）