如何在React Query中正确处理分页数据？

技术晨妍提问于 2026-01-25 15:37:58 阅读 49

优化

最近在项目里用React Query加载分页列表，但是当用户快速切换页面时，旧的数据请求会覆盖新的结果。试过调整useQuery的staleTime选项，但效果不明显，还是会出现数据错乱的情况。

有人知道更好的解决方案吗？或者我哪里没做对？

Redux

我来解答赞 13 收藏

反馈

2 条解答

耘郗 Lv1

问题应该出在你没有正确使用分页的 key 或者没有处理好请求顺序。

React Query 是根据 queryKey 去识别是否是同一个请求的。如果你的 queryKey 没有把页码参数包含进去，那不同页的请求会被认为是同一个，导致结果错乱。

举个例子：

const { data } = useQuery(

  ['todos', page], // 注意这里把 page 放进 queryKey 里了

  () => fetchTodos(page),

  {

    keepPreviousData: true // 这个选项很重要，能让页面切换时保留上一次的数据，直到新数据加载完成

  }

);

keepPreviousData 设置为 true 后，用户快速切换页面时就不会看到空状态或者上一个页面的数据残留。

另外，后端返回的数据结构里要包含页码和下一页的标识，你在调用 useQuery 的时候才能正确拼接数据。如果你在用 useInfiniteQuery，那还要注意处理好 getNextPageParam。

总结一下：

1. 确保 queryKey 包含当前页码
2. 设置 keepPreviousData: true
3. 如果是无限滚动场景，用 useInfiniteQuery + getNextPageParam

这样就能避免新旧请求交叉导致的数据错乱问题。

2026-02-03 13:19

百里瑞瑞 Lv1

这个问题其实是React Query里比较常见的坑，主要是因为请求缓存和数据更新的时机没对齐。直接给你个解决方案吧，用 useInfiniteQuery 来替代 useQuery，专门用来处理分页场景。

大致思路是这样：把分页参数（比如 page）作为查询键的一部分，这样每次切换页面时都会触发新的查询，而不是去复用旧的缓存数据。同时用 getPreviousPage 和 getNextPage 来管理分页逻辑。

下面是个简单的代码示例：

import { useInfiniteQuery } from 'react-query'



function fetchPages({ pageParam = 1 }) {

  return fetch(/api/posts?page=${pageParam})

}



function Posts() {

  const {

    data,

    isLoading,

    isError,

    fetchNextPage,

    hasNextPage,

  } = useInfiniteQuery(

    ['posts'],

    fetchPages,

    {

      getNextPageParam: (lastPage) => lastPage.meta.nextCursor,

    }

  )



  return (

    // 渲染逻辑

  )

}

如果不想改用 useInfiniteQuery，也可以在 useQuery 的查询键里动态加入分页参数，确保每个页面的请求都有独立的缓存键。两种方式都可以解决你提到的数据错乱问题。

最后提醒一下，React Query虽然强大，但分页场景确实有点绕，多试试这两种方法，总有一种适合你的需求。

2026-01-29 11:14