react-infinite icon indicating copy to clipboard operation
react-infinite copied to clipboard

handleInfiniteLoad() not called after 0 rendered elements

Open PsyKoMari opened this issue 6 years ago • 3 comments

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>

PsyKoMari avatar Mar 23 '18 09:03 PsyKoMari

yep, same issues, @garetht any idea?

geminiyellow avatar Jul 19 '18 09:07 geminiyellow

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

nodkrot avatar Sep 08 '18 01:09 nodkrot

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()
    }
  }

nodkrot avatar Sep 08 '18 02:09 nodkrot