infinite-scroll - 如何使用 Pagy 和 Stimulus.js 对数组进行分页？

Question

我正在对一个数组进行分页，当我滚动到页面底部时，我正在每页加载页面。不幸的是，我的数组的某些块似乎不断返回，而不是新加载的数组位。知道这是怎么回事吗？

这是我的infinite_scroll_controller.js

import Rails from '@rails/ujs';

export default class extends Controller {
    static targets = ["entries", "pagination"]

    scroll(){
        let next_page = this.paginationTarget.querySelector("a[rel='next']")
        if (next_page == null) { return }

        let url = next_page.href
        var body = document.body,
        html = document.documentElement

        var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
        
        if (window.pageYOffset >= height - window.innerHeight - 100) {
            console.log("bottom")
            this.loadMore(url)
        }
    }

    loadMore(url){
        Rails.ajax({
            type: 'GET',
            url: url,
            dataType: 'json',
            success: (data) => {
                console.log(data)
                this.entriesTarget.insertAdjacentHTML('beforeend', data.entries)
                this.paginationTarget.innerHTML = data.pagination
            }
        })
    }
}```

This is in my listing controller 

``` @listings = Listing.all.sort_by { |listing| listing.created_at }.reverse! 
   
    @pagy_a, @loaded_listings = pagy_array(@listings)
  
    respond_to do |format|
      format.html
      format.json {
        render json: { entries: render_to_string(partial: "listings", formats: [:html]), pagination: view_context.pagy_nav(@pagy_a) }
      }
    end```