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