“react-infinite-scroll-component” 一次调用后停止工作（loadMore 只被调用一次）

Posted 2023-03-10

【中文标题】“react-infinite-scroll-component” 一次调用后停止工作（loadMore 只被调用一次）

【英文标题】：“react-infinite-scroll-component” Stopped working after one call (loadMore only gets called once)

【发布时间】：2021-08-14 08:53:45

【问题描述】：

我使用 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>

请帮帮我，我做错了什么？

【参考方案1】：

我遇到了这个问题。事实证明我以错误的方式使用 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 个项目。我希望这对您有所帮助，因为我进行了很多搜索，直到我付出了所有的努力和错误才找到答案。

【讨论】：

他们应该在文档中完全提到这一点。在偶然发现您的答案之前，我感到很沮丧。谢谢！

正在工作！谢谢！！！