react-infinite-scroller
react-infinite-scroller copied to clipboard
onLoadMore does not get called anymore
upon scroll to the end, does not trigger the onLoadMore despite hasMore=true
Version 1.2.4
here is the configuration used
threshold={200}
initialLoad={false}
loadMore={() => console.log('load more')}
hasMore={true}
useWindow={false}
This has been driving me nutty. I'm glad it's not just me. Is there an ETA on this?
If you do it slowly it loads more rows, but if you scroll fast enough to the end nothing gets called, is that what you're seeing as well @brianwilliams-mubaloo @abhiakshay ?
@brianwilliams-mubaloo @abhiakshay Did you find a solution? It suddenly stopped working for me too...
i just started trying to use this library, and when I scroll to the bottom it just repeatedly calls loadMore
until it's out of pages. not sure if this is the same thing you're experiencing
Nope, but I had that issue as well and I solved it by setting initialLoad={ false }
and fetching the first page manually, which was a requirement for me anyway. When you do that, the library fetches the subsequent pages correctly.
I also seem to have fixed the issue discussed in this thread. For me, what works (at least for me) is adding a 10px padding at the bottom of a container div that wraps the loading component.
@grazianodev Yes, it solves the issue
Hit the same issue. Driving me nuts. Any update on this issue?
@grazianodev It didn't work for me :(
i just started trying to use this library, and when I scroll to the bottom it just repeatedly calls
loadMore
until it's out of pages. not sure if this is the same thing you're experiencing
What you can do as work around is set flag like isLoading, when you send your request set it to true, on response false, and set hasMore=(!isLoading && (...)).
it didn't work for me,
loadmore is not getting called!
<div style={{ height: document.body.clientHeight - 250, overflow: 'auto' }}>
<InfiniteScroll
initialLoad={false}
loadMore={async (current) => {
console.log('loadmore will never trigger', current);
this.setState({requesting:true})
await myRequest();
this.setState({requesting:false})
}}
hasMore={!this.state.requesting && this.state.hasNext}
threshold={20}
useWindow={false}
>
<Table />
</InfiniteScroll>
</div>
Nope, but I had that issue as well and I solved it by setting
initialLoad={ false }
and fetching the first page manually, which was a requirement for me anyway. When you do that, the library fetches the subsequent pages correctly.I also seem to have fixed the issue discussed in this thread. For me, what works (at least for me) is adding a 10px padding at the bottom of a container div that wraps the loading component.
experiencing this as well and the above fix works for me, but is there an explanation to this?
In my case I forgot to add height
attribute to the parent <div>
. Once added the issue got resolved.
I figured out the cause of this issue in my case, I was trying to use the infinite scroll functionality with useWindow={true}
and the issue turned out to be caused by a parent div which had overflow: auto
specified, I got rid of that and everything works now as expected! 😄
I figured out the cause of this issue in my case, I was trying to use the infinite scroll functionality with
useWindow={true}
and the issue turned out to be caused by a parent div which hadoverflow: auto
specified, I got rid of that and everything works now as expected! 😄
That's weird 'cause the examples uses parent with overflow: auto;
Any update on this issue? This randomly stopped working for me. Works if I remove initialLoad={false} but then the function calls infinitely times.
Is this project dropped or something? I tried the above-mentioned fixes but sadly none worked.