reactjs和mongoose无限滚动实现问题

fumotvh3 于 2023-10-19 发布在 Go

关注(0)|答案(1)|浏览(138)

最终的结果需要排序和显示“达到了广告”的结果也获取更多的结果时，没有点击按钮滚动窗口。我只是添加了“加载更多”按钮进行测试。
现有的实现不会在结果的顶部显示“reach-up-ads”，并且在单击“load more”按钮时加载相同的数据。

前端

useEffect(()=>{
    fetchPosts();
  }, [skip])

 const loadMore = () => {
   setSkip(posts?.length);
 }

const fetchPosts = async () => {
        const { data } = await getMobilePosts(skip);
        const filterData = await data?.filter(obj => obj.adPromote == "free-ad" || obj.adPromote == "reach-up-ad")
        .sort((f,p)=>{
            if (f.adPromote === 'reach-up-ad' && p.adPromote !== 'reach-up-ad') {
                return -1;
              } else if (f.adPromote !== 'reach-up-ad' && f.adPromote === 'reach-up-ad') {
                return 1;
              }
            return 0;
        })
        .map(obj => {
            return {
                ...obj,
                title: `${obj.title} (${obj.features.condition})`,
                location: `Posted On ${new Date(obj.createdAt).toDateString()}
            }
        });
   setPosts(existing => [...existing, ...filterData]);
}

    return (
        <div>
          {posts?.map((data, i) => {
                                return (
                                    <ExchangeItemWideCard
                                    key={i}
                                    id={data._id}
                                    title={data.title}
                                    location={data.location}
                                    />
                                )
          })}
        <Button onClick={loadMore}>Load more</Button>
        </div>
   )

** Mongoose **

export async function getMobilePosts(skips: any) {
          try{
            const skip = skips ? Number(skips) : 0;
            const DEFAULT_LIMIT = 10;
            return await Post.find({expiredAt: {$gte: currentDate},status: 'live'},
                                    "features.subCategory features.condition swapType.type swapType.price createdAt features.mainCategory title location.district location.location photos adPromote status description postedBy notes")
                                    .skip(skip)
                                    .limit(DEFAULT_LIMIT)
                                    .sort({ _id: -1 });
          } catch(error: any) {
            throw new Error(error as any);
          }
   }

mongoose

来源：https://stackoverflow.com/questions/77118285/reactjs-and-mongoose-infinite-scrolling-implementation-issue

1条答案

按热度按时间

erhoui1w1#

我发现这个简单的解决方案不使用任何NPM包。
info
场景是这样的，当用户滚动到选定的div区域时，只从后端mongoDB数据库获取数据，然后用户滚动应该获取更多数据。我使用IntersectionObserver和useRef来定位div位置，然后使用addEventListener来设置滚动事件。最终代码看起来像这样。

const [post, setPost] = useState([]);
      const [skip, setSkip] = useState(0);
      const [loadMore, setLoadMore] = useState(true);
      const [scrolled, setScrolled]:any = useState();
    
      const endRef = useRef();

      useEffect(() => {
        getData(loadMore);
        setLoadMore(false);
      }, [scrolled]);

      useEffect(() => {
        //user being scrolled to list section
        const observer = new IntersectionObserver((entries) => {
        const entry = entries[0];
        setScrolled(entry.isIntersecting)
      })
      observer.observe(endRef.current)

      const list = document.getElementById('list')
      if(props.scrollable) {
         // get list div properties if div is fixed height
        list.addEventListener('scroll', (e) => {
        const el = e.target; //documentElement
        if(el.scrollTop + el.clientHeight === el.scrollHeight) {
           setLoadMore(true);
        }
      });
      } else {
        // list has auto height
        window.addEventListener('scroll', () => {
       //now scrolling + browser height === list div height + if any indent of top of the page
       if (window.scrollY + window.innerHeight === list.clientHeight + list.offsetTop) {
            setLoadMore(true);
          }
        });
      }
       return () => {
        window.removeEventListener('scroll', this);
       }
     }, []);

     useEffect(() => {
      const list = document.getElementById('list');
      if(list.clientHeight <= window.innerHeight && list.clientHeight) {
        setLoadMore(true);
      }
   }, [post]);

   

    const getData = async (load) => {
        if(load){
           //fetch data from back-end
        }
    }

  return (
    <div id='list' style={{maxHeight: '30%'}} ref={endRef}>
      {post?.map((data, i) => {})}
    </div>
   )

赞(0）回复(0）举报 2023-10-19

我来回答

reactjs和mongoose无限滚动实现问题

1条答案

相关问题

热门标签

最新问答