如何使用Swiper与RTK Query实现无限滚动功能

你的问题核心是缺少拉取终止的判断逻辑，按以下步骤修改即可解决持续请求的问题：

• 首先利用Pokemon API返回的count字段做边界判断：该字段标识了接口全量数据的总条数，你可以将当前已加载的宝可梦列表长度和该值做对比，判定是否还有下一页数据。
• 新增加载拦截逻辑：在Swiper的reachEnd触发时，先判断两个条件：当前是否还有下一页、是否正处于加载状态，两个条件都满足（有下一页且不在加载中）才触发下一页请求，否则直接终止后续逻辑。

参考代码修改示例：

// 接口调用后计算是否还有下一页
const { data, isFetching } = useGetPokemonListQuery(pageParam);
const hasNextPage = data ? allPokemon.length < data.count : false;

// Swiper触底回调修改
const onSwiperReachEnd = () => {
  if (!hasNextPage || isFetching) return;
  setPageParam(prev => prev + 1);
};

你还可以根据hasNextPage的状态在列表底部渲染「没有更多数据」的提示，进一步优化交互体验。

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