React Query分页组件仅在窗口聚焦时重渲染的修复求助

这种现象通常是两个核心原因导致：一是React Query默认开启的refetchOnWindowFocus触发了聚焦时的重取，二是分页参数未正确关联到查询键（queryKey），导致页码切换时未触发新的查询。以下是针对性修复方案：

1. 让分页参数成为查询键的一部分 #

React Query通过queryKey识别不同的查询任务，必须将page参数加入queryKey，这样页码变化时才会自动触发新的数据获取，而非仅等待窗口聚焦。

// 修正后的自定义Query Hook
const useChats = (currentPage) => {
  return useQuery(
    ['chats', currentPage], // 将page加入queryKey
    () => fetchChats(currentPage),
    // 可选：如果不需要聚焦重取，这里可以单独配置
    { refetchOnWindowFocus: false }
  );
};

2. 确保组件中分页状态正确传递 #

在使用分页的组件（比如Chat View或Dashboard）中，用useState维护当前页码，切换时更新状态并传递给Query Hook：

// ChatView组件示例
const ChatView = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const { data: chatList, isLoading } = useChats(currentPage);

  const handlePageSwitch = (newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <div>
      {/* 分页控制按钮 */}
      <button 
        onClick={() => handlePageSwitch(currentPage - 1)} 
        disabled={currentPage === 1}
      >
        上一页
      </button>
      <span>当前第 {currentPage} 页</span>
      <button onClick={() => handlePageSwitch(currentPage + 1)}>下一页</button>

      {/* 渲染聊天内容 */}
      {isLoading ? (
        <div>加载中...</div>
      ) : (
        chatList?.map(chat => (
          <div key={chat.id} className="chat-item">{chat.content}</div>
        ))
      )}
    </div>
  );
};

3. 全局或局部禁用不必要的聚焦重取 #

如果你的业务场景不需要窗口聚焦时自动刷新数据，可以全局配置关闭该特性，避免干扰正常的分页逻辑：

// 在QueryClient初始化时全局配置
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

4. 验证数据接口的参数传递 #

确保fetchChats函数正确接收并使用分页参数，避免因参数未传递导致接口返回相同数据：

const fetchChats = async (page) => {
  const res = await fetch(`/api/chats?page=${page}`);
  if (!res.ok) throw new Error('获取聊天数据失败');
  return res.json();
};

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