seatgeek / react-infinite

A browser-ready efficient scrolling container based on UITableView
Other
2.71k stars 273 forks source link

handleInfiniteLoad() not called after 0 rendered elements #273

Open PsyKoMari opened 6 years ago

PsyKoMari commented 6 years ago

I'm not sure if that's a issue btw I wanna report

I'm using this component to render ListItems containing folders data, so I use this to navigate between folders. I request data from the server and build my ListItems with the functions handleInfiniteLoad() and buildElements() as examples shows. All works perfectly except when I navigate in a empty folder... The handleInfiniteLoad() is called, the buildElements() builds 0 items and ok, then I press "UP" to list previous folder, got data from the server, set the new state, but the list remains empty.

After some investigation I saw that I've to force call to handleInfiniteLoad() after it rendered 0 items to get it working again

<Infinite elementHeight={56}
    containerHeight={ 900 }
    infiniteLoadBeginEdgeOffset={this.state.infiniteLoadBeginEdgeOffsetMerish}
    onInfiniteLoad={ () => this.handleInfiniteLoad(true)}
    loadingSpinnerDelegate={ this.elementInfiniteLoad() }
    isInfiniteLoading={this.state.isMerishInfiniteLoading}
    timeScrollStateLastsForAfterUserScrolls={150}
    >
            {this.state.renderedElements}
</Infinite>
geminiyellow commented 6 years ago

yep, same issues, @garetht any idea?

nodkrot commented 6 years ago

So annoying, it just renders the loader on scroll even though isInfiniteLoading=false and there is no more. Please fix!

nodkrot commented 6 years ago

Actually all you need is this:

  componentDidMount() {
    window.addEventListener('scroll', this.onScroll, false)
    this.initialLoad()
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.onScroll, false)
  }

  onScroll() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 300) {
      this.loadMore()
    }
  }