I'm trying to get react-infinite working in a real-world situation, to do infinite scrolling with AJAX data loading at each scroll load request. In the docs, it says this:
You can set up infinite scrolling with this function like this:
Fetch a new page of records from the appropriate API
When the AJAX call returns, send the new list of elements (with the items that were just fetched) > back as the children of React Infinite.
Set React Infinite's isInfiniteLoading prop to false to hide the loading spinner display
onInfiniteLoad relies heavily on passing props as a means of communication in the style of idiomatic React.
I'm confused what it means "relies heavily on passing props". When I've run the code in the debugger, what I see is that the this object is set as the Inifinite instance's properties, like children, batchSize, etc. However, there is no reference to the outer context, which is required in order to execute an AJAX call. I've tried a number of variations, including closures, but haven't seen how it's possible to have access to both the outer wrapper scope, and the Infinite props.
In addition, the docs say "fetch a new page of records...". But, I've nowhere seen any property that informs us about the parameters of the new page - i.e., pageSize, and startRow - which would be mandatory for loading subsequent pages of data. What's the recipe for this? And, is the component designed in indefinitely add (concatenate) the new page data onto the existing children, or to replace the children.
Any answers you can provide, or a relevant example, would be appreciated.
@garetht
Hi -
I'm trying to get react-infinite working in a real-world situation, to do infinite scrolling with AJAX data loading at each scroll load request. In the docs, it says this:
I'm confused what it means "relies heavily on passing props". When I've run the code in the debugger, what I see is that the
thisobject is set as the Inifinite instance's properties, likechildren,batchSize, etc. However, there is no reference to the outer context, which is required in order to execute an AJAX call. I've tried a number of variations, including closures, but haven't seen how it's possible to have access to both the outer wrapper scope, and the Infinite props.In addition, the docs say "fetch a new page of records...". But, I've nowhere seen any property that informs us about the parameters of the new page - i.e., pageSize, and startRow - which would be mandatory for loading subsequent pages of data. What's the recipe for this? And, is the component designed in indefinitely add (concatenate) the new page data onto the existing children, or to replace the children.
Any answers you can provide, or a relevant example, would be appreciated.
Thanks, Don