Question

我正在使用一个名为react-infinite-scroller（https://www.npmjs.com/package/react-infinite-scroller）的软件包。如果单击任何主题，则我需要显示带有动态主题的标题，以表明数据属于该主题。 hasLoadMore（）是该程序包中的一个函数，它将提供我需要发送API的下一页以获得下一组数据的功能。如果我更改主题，则hasLoadMore（）函数提供页面，而不是从0开始，它提供了先前加载页面的页面编号。我该怎么实现。

<InfiniteScroll
  pageStart={0}
  loadMore={this.getPaymentPendingInvoices}
  hasMore={this.state.hasMorePaymentPendingItems}
  loader={this.renderSkeletonLoader()}
  threshold={50}
>
  <>
    {data &&
    data.map((item, index) => {
    return (
    <div key={index}>
      <InvoiceCard
      invoice={item}
      showModal={this.showModal}
      closeModal={this.closeModal}
      />
    </div>
    );
    })}
  </>
</InfiniteScroll>

Answer 1

您应该创建一个状态变量，并将pageStart设置为等于该变量。通过使用布尔值有条件地呈现该变量，以检查是否不需要从零开始。

<InfiniteScroll
  pageStart={this.state.shouldStartAtZero ? 0 : this.state.pageStart}
  loadMore={this.getPaymentPendingInvoices}
  hasMore={this.state.hasMorePaymentPendingItems}
  loader={this.renderSkeletonLoader()}
  threshold={50}
>

如何在无限滚动中更改动态内容

1 个答案: