React Query分页查询下一页按钮始终禁用问题求助

问题根源 #

你的代码里两个核心逻辑出错导致按钮始终禁用：

1. 下一页存在性判断逻辑错误，没有正确基于当前页码、每页条数和总数据量判断是否还有下一页
2. 按钮禁用条件的关联逻辑不匹配

具体修改步骤 #

• 定义分页核心参数：明确每页条数和总数据量，基于这两个值判断是否存在下一页

  const [page, setPage] = useState(1);
  const pageSize = 3; // 你设置的每页展示条数
  const totalItems = 10; // 你的数据源总数据量
  const hasNextPage = page * pageSize < totalItems;
  

• 修正按钮禁用逻辑：直接使用hasNextPage控制按钮禁用状态，同时确保页码更新逻辑正确

  <button
    onClick={() => setPage(prev => prev + 1)}
    disabled={!hasNextPage}
  >
    下一页
  </button>
  

• 确保查询键关联页码：让React Query感知页码变化，自动触发新页数据请求

  const { data } = useQuery(
    ['posts', page], // 把page加入查询键
    () => fetchPosts(page, pageSize),
  );
  

原理说明 #

通过当前页码与每页条数的乘积和总数据量对比，能准确判断是否还有未加载的数据。将页码加入React Query的查询键后，页码更新时会自动触发新的查询，保证数据与当前页码匹配，同时按钮的禁用状态会根据实际分页情况动态变化。

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