11. React 查询 - 分页列表

嘿伙计，

今天是学习如何使用 ReactQuery 对列表进行分页的时候了。

如果您在应用程序中构建列表，通常会创建列表分页以改进平台的用户界面，但也会限制 API 中的工作。

使用 ReactQuery，构建分页列表是小菜一碟。

您必须遵循 3 个步骤：

创建状态保存当前页面的值

创建一个状态来保存页面的限制（每页上的元素数量）

每次用户更改先前状态之一时获取数据。

但是让我们看一个更容易理解的例子

const fetchTodos = async (
  page: number,
  limit: number,
  signal: AbortSignal | undefined
): Promise<{
   
  totals: number;
  todos: Todo[];
}> => {
   
  const response = await fetch(`api/tasks?_page=${
   page}&_limit=$<