使用useQuery获取分页数据时，组件未更新如何解决？

你的问题核心在于React Query的查询键（queryKey）没有包含分页参数，导致页码变化时，React Query认为这是同一个查询，直接复用了之前的缓存数据，没有重新发起请求。只有当浏览器标签页切换触发React Query的后台刷新机制时，才会重新获取数据并更新组件。

具体修改步骤 #

1. 调整查询键的生成逻辑 #

修改你的API请求文件，让getUsersQueryKey接收page参数，返回包含分页信息的数组（React Query会根据数组的每一项判断查询是否唯一）：

export const getUsersQueryKey = (page: number) => ["users", page];

export const useUsersQuery = (page: number) =>
  useQuery(getUsersQueryKey(page), () =>
    axios
      .get(`http://localhost:8081/api/users?pageNumber=${page}&pageSize=2`)
      .then((response) => response.data.content as User[])
  );

2. 容器组件无需额外修改 #

你的UsersContainer组件中已经正确传递了page参数给useUsersQuery，修改查询键后，当page状态变化时，React Query会自动识别到这是一个新的查询，发起请求并更新组件中的data，表格也就会同步渲染新页码的数据了。

补充说明 #

React Query通过queryKey来管理缓存和触发查询更新，只有当queryKey发生变化时，才会重新执行查询逻辑。将分页参数加入queryKey后，不同页码的请求会被视为独立的查询，各自缓存数据，切换页码时既会自动请求新数据，也能保留之前页码的缓存，提升用户体验。

内容的提问来源于stack exchange，提问作者m_novak