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

Question

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

请帮我解决这个问题，我做错了什么？

Answer 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 个项目。我希望这对您有所帮助，因为我进行了很多搜索，直到经过所有的努力和错误才找到答案。