问题标签 [react-pagination]

我已经使用以下命令安装了 react-pagination：-

我的代码：-

答案将不胜感激！

我已经成功实现了 DynamoDB 分页并使用 API Gateway 和 Postman 进行了测试。但是，我对如何在 React 前端实现分页感到困惑。

目前，在第一次调用后端 api 时，它限制返回 2 张图像，带有 LastEvaluatedKey。在我的 React 中，我将 React.useEffect() 实现为：

在我的 api 中，我实现了调用后端的函数：

}

然后，我创建了一个“加载更多”按钮来加载更多图像。但是我迷失了如何使用 LastEvaluatedKey 调用后端的第二次调用以加载更多图像？

这是我的 github 项目： https ://github.com/ploratran/DogLookBook/tree/master/client

我是 React 新手，正在尝试开发我的第一个 Web 应用程序。我想要实现的是非常基本的。我正在尝试从 API 获取一些数据并将其显示在表格中。我正在尝试向表添加分页，以便所有记录都不会显示在同一屏幕上。我已经添加了页码，但是当我单击任何页码链接时，表格中的正确数据会被加载，但表格会立即消失。我不知道为什么会这样。下面是我的代码：

篮子.js

要以表格形式显示数据，请使用以下代码：Posts.js：

最后，对于分页，我使用以下代码：

请帮我纠正这个问题。非常感谢您提前抽出时间。这是CodeSandBoxLink

In my react app I have a component that requires pagination. What I would like to do, is to actually allow for pagination to be done also from the url, not only the ui. So if I go to

I could share the link to anyone and they will be redirected to page 2 of the users component.

Currently I'm doing something like this

And my route template looks something like this

So I can actually go to localhost/users/2 but this is not the right url form that I want to use, this is linked this to a UserDetails component and it should stay this way.

I'm able to extract the query params from the URL, but don't know how to use them

where useQuery is a helper function wrapping useLocation().search;

嗨希望有人可以帮助我。我在我的反应应用程序中添加了分页。我已经检查并且查询字符串正在工作，因为它们应该在后端。但是，当我尝试单击分页按钮时，它会向 URL 添加额外的内容，因此它不是 localhost:3000/topic/page/1，而是 localhost:3000/topic/page/topic/page/1。因此，当我单击链接时出现未找到错误。

路由文件

分页.js

搜索框.js

主题.js

提前致谢

我经历了许多反应虚拟化的例子，在我看到的所有这些例子中，它们最初都是在获取完整的数据。但是，我们需要使用 react-virtualized 组件加载网格（可能是数百万条记录），因为它具有其他几个功能。由于要渲染的数据很大，我们从服务器端逐部分获取它（可能一次 1000 个）。您能否让我知道并举例说明如何使用反应虚拟化来实现这一目标？

谢谢您的回答

我正在尝试为“基本”和“高级”订阅者获取有限的记录，并在分页中显示记录计数。

我尝试了很多方法来显示以下格式的记录。

如果，我创建“BASIC”订阅者，那么它的“value = 0”和“PREMIUM”它的“value = 1”。

1. 对于“BASIC”订阅者，我想显示最新的 30 条记录。喜欢：

   • 如果，我有“total = 8”的记录。然后，它将获取 8 条记录并在分页中显示（8 条中的 1-8 条）记录。
   • 如果，我有“总计 = 35”条记录。然后。它将获取最新的 30 条记录并在分页中显示（30 条中的 1-30 条）记录，因为我想为基本用户显示 10 条最新记录。

2. 对于“高级”订阅者，我想显示最新的 50 条记录，pageSize 为 30。例如：

   • 如果，我有“总计 = 55”条记录。然后，它将以 {30-30} 的形式获取记录，并在第一页显示 (1-30 out of 55)，在下一页显示 (31 - 55 out 55)。
   • 如果，我有“总计 = 75”条记录。然后。它将获取最新的 100 条记录并在第一页中显示（50 条中的 1-30 条），在下一页中的分页中显示（50 条中的 31-50 条），因为我想为高级用户显示最新的 50 条记录。

下面是我的代码，请纠正我的错误。感谢您的任何帮助。

健康）状况：

1. 如果 userType = 0 那么，User = "BASIC"
2. 如果 userType = 1 那么，User = "Premium"

我使用 react-infinite-scroll-component 库进行分页，但即使 hasMore 为 true，loadMore 也会调用一次。

请帮我解决这个问题，我做错了什么？

我正在尝试在使用 React / NextJs - 构建的应用程序中对我的一个页面进行分页getServerSideProps。

第 1 步：创建分页组件
第 2 步：重定向到带有页码的 URL（基于用户点击）
第 3 步：它应该使用较新的页面值重新呈现getServerSideProps，这现在不会发生。

我当前的代码块（服务器端道具 - API 调用）：

我按照本教程进行分页。

通过修改 click 方法语句：

页面重定向句柄代码：

尝试解决：

1. 添加了基于thisrefreshData在 URL 更改时调用的方法。ServerSideProps
2. 尝试更改getServerSideProps为getInitialProps- 没有运气

任何帮助或链接将不胜感激，自 3 天以来一直坚持完成任务

我还在学习反应钩子，所以请耐心等待；我正在编写一个自定义服务器端分页组件；首先，我从服务器检索总页数，如下所示：

然后在 for 循环中渲染一些 jsx

和 jsx 一样

服务器返回 4 个页面，它们在屏幕上正确呈现；但是我在这里有两个问题：

1. 每当我单击任何页面按钮时，activePageNumber 始终为 1，它根本没有改变。
2. 每次点击寻呼机时都会调用使用效果函数。

这是我的组件状态函数：

只是为了澄清：props.SelectedPageChanged(i - 1, 5);用于更新父组件中表的数据。