hasMore is true, but loadMore only gets called twice

Even if hasMore is set to true (to test this I have hard set it to always be true), loadMore function gets called only twice. Has anyone seen this type of issue before?

                               <InfiniteScroll
                                dataLength={eventListCount}
                                next={this.loadMore}
                                hasMore={!isFetching && hasMore}
                                loader={<h4>Loading...</h4>}
                                height={height}
                                >
                              //  .. render component which lists data from eventList
                            </InfiniteScroll>

[mikelehen]

I had the same issue. It turns out I was using dataLength wrong. I thought it was supposed to be the total length of items that could be displayed, but instead it seems it should be the length of items that are currently displayed, i.e. in @RAMKUMARDANE’s example above it should probably be dataLength={items.length}…

TBH I am not sure why the component needs dataLength given it uses hasMore to know if there’s more to render, and it could presumably use children.length to know how many elements are displayed. 🤷

[sychovSaveliy]

Hey, I also met it and fix for me: set to dataLength a current length of list (from state). It will a trigger for calling fetchMore. I tried set total list of data - doesn’t work.