NextJS 如何使 pexels api 分页工作

【问题标题】：NextJS how to make pexels api pagination workNextJS 如何使 pexels api 分页工作
【发布时间】：2022-01-04 13:44:11
【问题描述】：

我正在使用 NextJS 使用 pexels api 创建一个照片库，并希望将分页添加到项目中，但我不太了解有关分页的文档，所以我不知道我必须做什么才能使这项工作.

我想要的是在图库底部有一个按钮，上面写着“显示更多”，当我点击它时会显示更多照片。

这是我的代码：

【问题讨论】：

标签： api next.js

【解决方案1】：

首先创建两个反应状态。

  const [page, setPage] = useState(1);
  const [perPage, setPerpage] = useState(10);

这里我们每页有 10 张图片，如果您愿意，可以更改每页需要多少张图片。

然后像下面这样转换你的 URL。

  const url = `https://api.pexels.com/v1/curated?page=${page}&per_page=${perPage}`
  const data = await fetch(url)

在 useEffect 挂钩中执行此操作。现在你想加载更多的东西只是增加 perPage 状态。如果你想获得一个新的页面和新的图像，然后改变页面状态。

【讨论】：