11. React 查询 - 分页列表

最新推荐文章于 2026-08-16 14:04:48 发布

原创最新推荐文章于 2026-08-16 14:04:48 发布 · 539 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React 查询（11 部分系列）

本文介绍了如何在React应用中利用ReactQuery轻松实现列表的分页功能。通过创建状态保存当前页面和每页元素数量，以及监听状态变化来获取数据，简化了分页列表的构建过程。使用ReactQuery，只需在useQuery中处理好查询键和参数，即可方便地实现分页。

嘿伙计，

今天是学习如何使用 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=${limit}`, {
    signal,
  });
  if (!response.ok) {
    throw new ResponseError('Failed to fetch todos', response);
  }
  const todos: Todo[] = await response.json();
  const totals = Number.parseInt(
    response.headers.get('x-total-count') || '0',
    10
  );

  return {
    totals,
    todos,
  };
};

interface UseTodos {
  todos: Todo[];
  isLoading: boolean;
  isFetching: boolean;
  error?: string;
  pages: number;
  page: number;
  setPage: Dispatch<SetStateAction<number>>;
}

export const useTodos = (): UseTodos => {
  const [page, setPage] = useState<number>(1);
  const [limit] = useState<number>(5);

  const {
    data: { todos, totals } = {
      todos: [],
      totals: 0,
    },
    isLoading,
    isFetching,
    error,
  } = useQuery(
    [QUERY_KEY.todos, page, limit],
    ({ signal }) => fetchTodos(page, limit, signal),
    {
      refetchOnWindowFocus: false,
      retry: 2,
    }
  );

  return {
    todos,
    isLoading,
    isFetching,
    error: mapError(error),
    pages: Math.ceil(totals / limit),
    page,
    setPage,
  };
};