我使用react-infinite-scroll-component库进行分页,但即使hasMore为true,也只调用一次loadMore。
<InfiniteScroll
dataLength={100}
pullDownToRefreshThreshold={50}
next={loadMoreConversation}
scrollableTarget="scrollableDiv"
hasMore={true}
loader={<h4>Loading...</h4>}
>
<ChatItemList
chatItems={chatItems}
isInDeleteMode={deleteActive}
onBottomDrawerHandler={onBottomDrawerHandler}
/>
</InfiniteScroll>
请帮我解决这个问题,我哪里做错了?
发布于 2021-05-26 14:09:07
我有这个问题。事实证明我使用dataLength的方式是错误的。我认为它应该是可以显示的项目的总长度,但实际上,它似乎应该是当前显示的项目的长度,所以正确的方法应该是这样:
<InfiniteScroll
dataLength={page * 10}
pullDownToRefreshThreshold={50}
next={loadMoreConversation}
scrollableTarget="scrollableDiv"
hasMore={true}
loader={<h4>Loading...</h4>}
>
<ChatItemList
chatItems={chatItems}
isInDeleteMode={deleteActive}
onBottomDrawerHandler={onBottomDrawerHandler}
/>
</InfiniteScroll>
在本例中,我每页加载10个项目。我希望这对你有帮助,因为我搜索了很多,直到我尽了所有的努力和错误才找到答案。
https://stackoverflow.com/questions/67699376
复制相似问题