使用 fetch() 在 React 中进行分页

Posted 2023-03-10

【中文标题】使用 fetch() 在 React 中进行分页

【英文标题】：Pagination in React with fetch()

【发布时间】：2017-10-12 06:01:45

【问题描述】：

我只是简单地从 API 中获取对象

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


componentDidMount() 
    this.getData();

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

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

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

例如，我是否可以在我的 API 中只保留打印 X 个对象，并在我的 fetch 请求中决定加载多少个对象？因此，当我按“加载更多”2 次时，API 端点将返回 30 个对象，而不是仅返回 10 个 - 即使之前已经获取了前 20 个对象？

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

编辑

但是如果我有一个返回类似的 API 端点

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

我最初是在第 1 页检索对象，每次单击“加载更多”时，我都会增加页码并在下一页附加对象（this.setState( jobs: this.state.jobs.concat(data.jobs) ); 其中data.jobs 是下一个页面的对象，那我怕是在数据库中创建了新对象，所以哪些对象属于哪个页面完全搞砸了，没有显示全部或部分重复。

【问题讨论】：

“或者我可以在安装组件时简单地加载数千个对象并使用 React 来限制看到的数量吗？” - 这是一种伪装的分页。您的 api 请求能否返回有限的结果集？

是的。我自己制作 API，所以我可以限制对象的数量，我可以向 API 端点添加字段，例如“currentPage”、“numObjects”、“totalNumObjects”等，以确定我是否已加载所有对象。我是 React 的新手，所以我只是猜测应该怎么做。我希望我能走在正确的轨道上。

嗨，我现在处于同样的情况，只是我无法操作 API，因为它已经完成了。你的解决方案是什么？ @Jamgreen

【参考方案1】：

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

另一方面，如果您的数据不是太大，您可以制作假分页，将所有对象都放在内存中，只显示您感兴趣的对象。

我不建议增加您正在查找的对象的数量，因为您没有利用已经获取的对象的优势，并且每次增加数量时，请求都会持续更多。