如何解决反应项目中的分页问题

Question

i have an react project which is listing some news from an api . in that api each page gives me 10 newses . for example when i give input 0 to the api , it will gives me 1-10 news . when i give input 1 it will gives me 11-20 news etc ..

in my case i will change the apis input when the scroll bar touch the end of the Screen InnerHeight . also i will fetch that api again . then the new datas i will append to the oldest data array .

for example :- when the page is open the input is 0 , so the api will gives first 10 news . so i stored in that in a state , then the user scroll in that page , when the scrollbar touch the end i changed the input to 1 and fetch the api again . so it will gives the 11-20 news . i will append to that in that oldest state . so now in that state total 20 news.

also each news has a detail news page .when the user click the news it will be redirect to the detail news page . the problem is when the user clicks back button from the detail news page , it will redirect to the all news page , but it will fetch again , then the api input will be 0 , so the user cannot see the last time visited news . it will be on the top of window .

for example when the user clicks 56 news , then it will redirect to the 56th detail news page. but when click back button it will be on the 0th news position .

how can i fix that . how to get 56th news position when the user clicks back button .

sorry for my bad English

Answer 1

the problem is: your news index page (or component) does not have access to the last news your user saw, it have access to it's inner state, but when the user goes to detailed news page, that state will be destroyed.

you can have two approaches to achieve what you want:

use a global state manager like redux:

in redux you can store a global state, that all of your components have access to.

each time your user visits the next news pagination, you update your redux store, and when he comes back from a detailed news page, you can see how many news he has seen, and call your api for example accordingly

another aproach is to use your router for storing user data:

when your user visits your api with index 1 you update your url accordingly: for ex: /news for main idnex page and when the user sees another one, you update it with /news?index=1

in this situation if the user hits the back button, it will be redirected to the last seen page, and you can read the router in your component to determine what api call your user last visited and load the needed data for him/her