hasMore is true, but loadMore only gets called twice

[girlslearningcodeyul]

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>

[RAMKUMARDANE]

same issue I am also facing but in my case lodemore is called only once

 ` <InfiniteScroll
               className={classes.InfiniteScrolls}
               dataLength={totalLength} //This is important field to render the next data
               next={fetchData}
               hasMore={items.length >= totalLength ? false : true}
    >
             `

[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. 🤷

[girlslearningcodeyul]

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. 🤷

hmmm, thank you @mikelehen . I tried setting dataLength to the number of items that a server is supposed to return (which is 20 in this case) and hasMore still only ran twice, even though to troubleshoot I hard-coded hasMore to true.

[mikelehen]

@girlslearningcodeyul Ah, bummer. You may have a different issue than me then. In my case I was setting dataLength to be a number much greater than the number of children elements I was rendering inside the InfiniteScroll tag and so I think it was essentially waiting for me to add the rest of the children elements (i.e. it thought I was still asynchronously fetching data or something).

I'm not sure what the issue is in your case. Though I could imagine that just setting it to 20 wouldn't work because after you get to the 2nd page, there should be 40 elements being rendered, not 20. If it's easy to share a demo of your example that's not working it might be possible to help debug. Else, I ended up solving my issue by comparing what I was doing to the live examples linked from the github readme...

[girlslearningcodeyul]

Correction! Thank you @mikelehen . I figured what it was, but not without your help. Looking at dataLength, the issue is, it has to to change, so moving it to the reducer and instead of adding up the number of items to render, substract from the total length count. Works like magic now!

[girlslearningcodeyul]

Correction! Thank you @mikelehen . I figured what it was, but not without your help. Looking at dataLength, the issue is, it has to to change, so moving it to the reducer and instead of adding up the number of items to render, substract from the total length count. Works like magic now!

for example, I have 48 items in total, the server returns 20 at a time. The first load dataLength must be 48, on second that value should change to 28 and then just 8.

[mikelehen]

@girlslearningcodeyul Yay! 🎉 Glad it's working.

Strangely, I ended up doing something different. If I had 48 items, then on first load, I'd set dataLength to 20, and then on second 40, and then 48 (with hasMore=false at that point). Maybe it works both ways. 🤷

[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.

[RAMKUMARDANE]

same issue I am also facing but in my case lodemore is called only once

 ` <InfiniteScroll
               className={classes.InfiniteScrolls}
               dataLength={totalLength} //This is important field to render the next data
               next={fetchData}
               hasMore={items.length >= totalLength ? false : true}
    >
             `

// import InfiniteScroll from "react-infinite-scroll-component"; import InfiniteScroll from "react-infinite-scroller";

I changed liberary as suggested by another developer. and infinite Scroll with required changes works.

[JFernandoGomez]

this should be updated in the documentation, fixed as the comment above

[dohoangtung]

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. 🤷

You've saved my day!

[nardocesar]

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. 🤷

You made my day man! If you feel comfortable send me your BTC wallet address. Would be a pleasure to me to buy you a coffee ☕️

[mikelehen]

@nardocesar Hah, glad it helped but no need to buy me coffee! Feel free to send that goodwill towards somebody else you run across who could use it. Have a great day!

[arensade]

I checked dataLength and also hasMore but I figured out that it still makes twice calls if the page height changes (in my case)! so if you have a similar problem it's better to set min-height to list container.

[wisnuvb]

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.

Thanks @sychovSaveliy, you're right. This solved the issue I was having

[MusabDev]

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. 🤷

Thank you very much. This worked perfectly for me. Thanks again!

[carlos-dubon]

https://stackoverflow.com/questions/67699376/react-infinite-scroll-component-stopped-working-after-one-call-loadmore-only