search

john-smilga / react-projects

4.78k stars 3.86k forks source link

project 19 - stock photos displays first 10 photos twice after fetching additional photos on scroll #38

Closed adamwinzdesign closed 3 years ago

adamwinzdesign commented 3 years ago

Recreate issue by loading the first set of 10 photos, then scrolling down in order to fetch more photos. The first set of 10 photos are displayed twice, then the additional photos are added to the list.

Initial load:

initial load

After scroll:

after scroll


As you can see, the car, bookshelf, camera, and portrait repeat on scroll.

adamwinzdesign commented 3 years ago

So after a little bit of experimentation, I determined that we have to initialize the page variable to 1, not to 0. This is because the unsplash api returns the first ten photo results during the initial load with page as 0 by default, even though there technically is no page 0 because the first ten results are returned whether page is set to 0 or 1. So, if we start with page as 0, we get the first ten results, and when the user scrolls for the first time, page increases by 1, and the first ten results are returned again, then the next ten results, and so on.