reactjs - 如何使用 react-scroll-component 进行分页？

Question

我不太明白如何使用这个包，我假设每次滚动到底部时它都会获取有限数量的数据，所以在我的后端我只返回十五个结果但我认为必须有一个分页让 api知道它会返回哪 15 个结果吗？并且我假设的分页将在这个包的变量中，但我没有看到任何内容。谁能告诉我这是如何工作的？这是我的代码

前端

<InfiniteScroll 
                    dataLength={posts.length} //This is important field to render the next data
                    next={fetchPosts}
                    hasMore={true}
                    loader={<h4>Loading...</h4>}
                    endMessage={
                      <p style={{ textAlign: 'center' }}>
                        <b>Yay! You have seen it all</b>
                      </p>
                    }
                >
                {posts.map((p)=>(
                    //console.log(p.id)
                    <Post key={p._id} post={p}/>
                ))}
                </InfiniteScroll>

const fetchPosts = async ()=>{
        const res = username 
         ? await axios.get("/api/posts/profile/"+ username)
         : await axios.get("/api/posts/timeline/all")    
        let data = ""
        data = res.data.data
        setPosts(data.sort((p1,p2)=>{
            return new Date(p2.createdAt)-new Date(p1.createdAt);
        }));

    };

后端

public async timelinePost(user_id:string){
        const currentUser:any = await LocalAuthModel.findById(user_id)
        const friendPosts = await PostModel.find({userId:{$in: [user_id,...currentUser.followings]}}).sort([['createdAt', -1]]).limit(15)
        return friendPosts;
    }

标签： reactjsreact-scroll