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

Question

我使用 react-infinite-scroll-component 庫進行分頁，但即使 hasMore 為真，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 個項目。 我希望這對您有所幫助，因為我進行了很多搜索，直到我付出了所有的努力和錯誤才找到答案。

Answer 2

這是一個 React Query useInfiniteQuery()示例，假設您有：

data: {
  pages: [
    {/*a page*/
      results:[
        {/*an item*/
          /*...*/
        }
      ]
    }
  ]
}

以這種方式設置您的dataLength ：

const {isSuccess, 
       isLoading, 
       isError, 
       data, 
       error, 
       hasNextPage, 
       fetchNextPage, 
       isFetchingNextPage
      } = useInfiniteQuery(
        path /*your query path here*/,
        fetchFn /*your fetch function here*/);
return <div>
    {isError && <div>Error! {error?.message}</div>}
    {isLoading && <div>Loading...</div>}
    {isSuccess && data?.pages && (
        <div>
            <ListHeader isFetching={isFetchingNextPage} data={data}/>
            <InfiniteScroll
                dataLength={data.pages.reduce((acc, page) => acc + page.results.length, 0)}
                next={fetchNextPage}
                hasMore={hasNextPage}
                loader={<div>Loading...</div>}
                endMessage={<p>- You have seen it all -</p>}
            >
                {data.pages.map((page, i)=> (
                    <Fragment key={i+''}>
                    {page.results.map((item, j)=> (
                        <ListItem key={i+'.'+j} path={path} item={item}/>
                    ))}
                </Fragment>
                ))}
            </InfiniteScroll>
        </div>
    )}
</div>

其中 ListHeader 和 ListItem 是你自己的組件。