react-infinite
react-infinite copied to clipboard
handleInfiniteLoad() not called after 0 rendered elements
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>
yep, same issues, @garetht any idea?
So annoying, it just renders the loader on scroll even though isInfiniteLoading=false and there is no more. Please fix!
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()
}
}