如何解决React项目中的分页问题
我有一个React项目，该项目正在列出API的一些新闻。在该API中，每页给我10个新闻。例如，当我将输入0给API时，它将给我1-10个新闻。当我给出输入1时，它将给我11-20新闻等。
在我的情况下，当滚动条触摸屏幕末端时，我将更改APIS输入。我也将再次获取该API。然后，我将附加到最古老的数据阵列的新数据。
例如： - 当页面打开时，输入为0，因此API将提供第一个新闻。因此，我将其存储在一个状态下，然后将用户滚动在该页面中，当滚动条触摸末端时，我将输入更改为1，然后再次获取API。因此，它将给出11-20新闻。我将在最古老的状态附加到这一点。因此，现在在该州共有20个新闻。
另外，每个新闻都有一个详细的新闻页面。当用户单击新闻时，它将重定向到详细新闻页面。问题是当用户单击“详细新闻”页面中的返回按钮时，它将重定向到所有新闻页面，但是它将再次获取，然后API输入为0，因此用户无法看到上次访问的新闻。它将在窗户的顶部。
例如，当用户点击56新闻时，它将重定向到第56个详细信息新闻页面。但是，当单击返回按钮时，它将处于第0个新闻位置。
我该如何解决。当用户单击返回按钮时，如何获得第56个新闻位置。
对不起，我的英语不好
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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是：您的新闻索引页面（或组件）无法访问用户看到的最后一个新闻，它可以访问其内在状态，但是当用户转到详细的新闻页面时，该状态将被销毁。
您可以使用两种方法来实现自己想要的方法：
使用Redux等全球状态经理：
在Redux中，您可以存储所有组件都可以访问的全局状态。
您都可以看到他看到了多少新闻，并将其称为API
每次您的用户访问下一个新闻分页时，您都会更新您的Redux商店，当他从详细的新闻页面回来时， 用于存储用户数据的路由器：
用户使用索引1访问API时，您可以相应地更新URL：
对于主iDnex页面的ex： /news，当用户看到另一个页面时，您可以使用 /news？index = 1
在这种情况下使用返回按钮，它将被重定向到最后一个看到的页面，并且您可以在组件中读取路由器，以确定您上次访问的用户的API，并为他/她加载所需的数据
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