如何修复 React 项目中的分页问题
how to fix pagination issue in react project
我有一个 React 项目，它列出了来自 api 的一些新闻。 api 每页给我 10 条新闻。例如，当我给 api 输入 0 时，它会给我 1-10 条新闻。当我输入 1 时，它会给我 11-20 条新闻等..
在我的例子中，当滚动条触及屏幕 InnerHeight 的末端时，我将更改 apis 输入。我也会再次获取 api。然后我将新数据附加到最旧的数据数组。
例如：- 当页面打开时输入为 0，因此 api 将给出前 10 个新闻。所以我将其存储在一个状态中，然后用户在该页面中滚动，当滚动条触及末端时，我将输入更改为 1 并再次获取 api。所以它会给出 11-20 的消息。我将附加到那个最古老的状态。所以现在在那个州总共有 20 条新闻。
每个新闻都有一个详细新闻页面。当用户单击新闻时，它将被重定向到详细新闻页面。问题是当用户从详细新闻页面点击后退按钮时，它会重定向到所有新闻页面，但它会再次获取，然后 api 输入将为 0 ，因此用户看不到最后一次访问新闻。它将位于 window 的顶部。
例如当用户点击56条新闻时，会重定向到第56条新闻详情页面。但是当点击后退按钮时，它将在第 0 个新闻位置。
我该如何解决这个问题。如何在用户单击后退按钮时获得第 56 个新闻位置。
抱歉我的英语不好
问题是：您的新闻索引页面（或组件）无法访问您的用户看到的最后新闻，它可以访问其内部状态，但是当用户转到详细新闻页面时，该状态将被摧毁。
您可以通过两种方法来实现您想要的效果：
使用像 redux 这样的全局状态管理器：
在 redux 中，你可以存储一个全局状态，你的所有组件都可以访问它。
每次你的用户访问下一个新闻分页，你更新你的redux store，当他从一个详细的新闻页面回来时，你可以看到他看了多少新闻，并调用你的api例如相应
另一种方法是使用您的路由器来存储用户数据：
当您的用户使用索引 1 访问您的 api 时，您会相应地更新您的 url：
例如：/news 用于主 idnex 页面，当用户看到另一个页面时，您将其更新为 /news?index=1
在这种情况下，如果用户点击后退按钮，它将被重定向到上次查看的页面，您可以读取组件中的路由器以确定 api 调用用户上次访问的内容并加载him/her
所需的数据
我有一个 React 项目，它列出了来自 api 的一些新闻。 api 每页给我 10 条新闻。例如，当我给 api 输入 0 时，它会给我 1-10 条新闻。当我输入 1 时，它会给我 11-20 条新闻等..
在我的例子中，当滚动条触及屏幕 InnerHeight 的末端时，我将更改 apis 输入。我也会再次获取 api。然后我将新数据附加到最旧的数据数组。
例如：- 当页面打开时输入为 0，因此 api 将给出前 10 个新闻。所以我将其存储在一个状态中，然后用户在该页面中滚动，当滚动条触及末端时，我将输入更改为 1 并再次获取 api。所以它会给出 11-20 的消息。我将附加到那个最古老的状态。所以现在在那个州总共有 20 条新闻。
每个新闻都有一个详细新闻页面。当用户单击新闻时，它将被重定向到详细新闻页面。问题是当用户从详细新闻页面点击后退按钮时，它会重定向到所有新闻页面，但它会再次获取，然后 api 输入将为 0 ，因此用户看不到最后一次访问新闻。它将位于 window 的顶部。
例如当用户点击56条新闻时，会重定向到第56条新闻详情页面。但是当点击后退按钮时，它将在第 0 个新闻位置。
我该如何解决这个问题。如何在用户单击后退按钮时获得第 56 个新闻位置。
抱歉我的英语不好
问题是：您的新闻索引页面（或组件）无法访问您的用户看到的最后新闻，它可以访问其内部状态，但是当用户转到详细新闻页面时，该状态将被摧毁。
您可以通过两种方法来实现您想要的效果：
使用像 redux 这样的全局状态管理器：
在 redux 中，你可以存储一个全局状态，你的所有组件都可以访问它。
每次你的用户访问下一个新闻分页，你更新你的redux store，当他从一个详细的新闻页面回来时，你可以看到他看了多少新闻，并调用你的api例如相应
另一种方法是使用您的路由器来存储用户数据：
当您的用户使用索引 1 访问您的 api 时，您会相应地更新您的 url： 例如：/news 用于主 idnex 页面，当用户看到另一个页面时，您将其更新为 /news?index=1
在这种情况下，如果用户点击后退按钮，它将被重定向到上次查看的页面，您可以读取组件中的路由器以确定 api 调用用户上次访问的内容并加载him/her
所需的数据