修改

Question

我只是使用

从API获取对象

getData() {
    fetch('API_URL').then(res => res.json()).then(data => {
        this.setState({ jobs: data.jobs });
    }).catch(console.log);
}

componentDidMount() {
    this.getData();
}

但我希望能够点击按钮来加载更多对象。

我想我应该创建API，以便它只打印例如一次10个对象并保持变量＆＃34; pageNumber＆＃34;如果我点击＆＃34;加载更多＆＃34;按钮，它应该从下一页获取并附加新对象。

这是正确的做法吗？或者我可以在安装组件时简单地加载数千个对象并使用React来限制看到的数量？我想这将是一种非常低效的获取数据的方法，但我不确定React如何处理这个。

例如，我可以在我的API中保留打印X个对象，并在我的获取请求中决定加载了多少个对象？因此，当我按下＆＃34;加载更多＆＃34; 2次，API端点将返回30个对象而不是10个 - 即使前20个已经被提取过了吗？

我曾尝试在React中搜索分页，但我只获得了很多分页库。我只想了解非常基本的初始提取和点击加载后的提取。

修改

但是如果我有一个返回类似

的API端点

{
  page: 1,
  objectsPerPage: 10,
  numPages: 30,
  objects: [
    ...
  ]
}

我最初检索第1页上的对象，每次点击＆＃34;加载更多＆＃34;，我会增加页码并将对象附加到下一页（this.setState({ jobs: this.state.jobs.concat(data.jobs) });所在的位置data.jobs是下一页上的对象列表，然后我担心在数据库中创建新对象，因此哪些对象属于哪个页面被完全搞砸了，并且不会显示全部或一些重复项。< / p>

Answer 1

是的，在API上使用pageNumber是正确的方法，因此您只需查找您不具备的寄存器。

在另一个尺寸上，如果你的数据不是太大，你可以让虚假的分页包含内存中的所有对象，只显示你感兴趣的对象。

我不建议增加您要查找的对象数量，因为您没有获得已经获取的对象的优势，并且每次增加数量时，请求将持续越来越多。< / p>

React中的分页与fetch（）

修改

1 个答案: