Closed pribeh closed 4 years ago
Hey @pribeh thanks for this report, before i continue with the investigation i have notice couple things in your code that could be problematic(may not be the cause of this issue which i'll take a look at).
getUsersProfilesByMonth
method when you reset hasMoreItems
state i think it should be hasMoreItems: prevState.profiles.length < profilesPage.limit
because it only has more data to fetch if the current data length is less the api data limit right?also: What FlatList version are you using?
try that fix and get back to me while i investigate the cursor and any related issue with pagination. sorry for this
Thanks @ECorreia45 . The adjustment you suggested doesn't yield any items loaded on scroll – no additional results are returned.
The console spits out:
Users.js:88******************************* before skip: 0, this.hasMoreItems=false
Users.js:88******************************* before skip: 10, this.hasMoreItems=true
Users.js:100 ******************************* AFTER this.state.profiles.length: 10, returned skip: 0, this.hasMoreItems=true
Users.js:100 ******************************* AFTER this.state.profiles.length: 20, returned skip: 10, this.hasMoreItems=true
Users.js:88 ******************************* before skip: 20, this.hasMoreItems=true
Users.js:100 ******************************* AFTER this.state.profiles.length: 30, returned skip: 20, this.hasMoreItems=true
Users.js:88 ******************************* before skip: 30, this.hasMoreItems=true
Users.js:100 ******************************* AFTER this.state.profiles.length: 40, returned skip: 30, this.hasMoreItems=true
Users.js:88 ******************************* before skip: 40, this.hasMoreItems=true
Users.js:100 ******************************* AFTER this.state.profiles.length: 50, returned skip: 40, this.hasMoreItems=true
We're using Flatlist ^1.4.2
Thanks for this. Will keep you posted on this.
Hey, @pribeh I took a look at this and could not find anything that may have caused the problem you are experiencing.
By taking a look at your code again, a couple of things jumped at me again:
1 - your logs make sense since it should load more if the hasMoreItems
is true as your logs indicate. I would be surprised if it was false and kept calling. I still think something about yout hasMoreItems
state set is not quiet right because profilesPage.data.length
will be 10
or less according to $limit: 10
. profilesPage.limit
will be the max data from your database. Can you run this and print the profilesPage.limit
. I think you should check if hasMoreItems: prevState.profiles.length === profilesPage.limit
instead. also be careful with the way you are logging things, react setState
is asynchronous so use it second parameter to log things after like this.setState(prevState => ({....}), () => {console.log('****** AFTER ....')
.
2 - display flex is interfering with the scrolling. display flex force things to fit and flatlist relies and scrollable containers so make sure the container with the flatlist items have "overflow: auto
". You have flex: 1
everywhere which forces box to take available space to fit.
3 - setState
does not return promise so you cant await on it. try this instead:
this.setState({ profiles: [] }, async () => {
await this.getUsersProfilesList();
this.defaultOption = "Select date...";
})
4 - there are a lot of async
and await
going around instead of using promise chains and natural react lyfescycle methods which makes it hard to follow the logic of your application and guess what is probably doing.
If you can get in touch with me i would love to help you further but i could not find anything wrong beside the way it is being used. sorry.
When we setup the flatlist with hasmoreitems and pagination we seem to be experiencing an odd loading behaviour on scroll. If the cursor is outside the region of the flatlist and you scroll all the way to the bottom of the list no event is triggered to load more items. This may be a totally separate issue but we do not know why this is happening. However, when you scroll inside the region of the flatlist it seems like the hasmoreitems fires on every scroll event loading more items to the list each time.
To reproduce this:
Here's the full example: