React Native无限滚动：适配Limit-Offset后端的Query选型与实现疑问

一、方案选择：Infinite Query 更适合你的无限滚动场景 #

你的后端采用 offset + limit 的分页模式，React Query 的 Infinite Query 完全适配这种结构，且比手动实现的分页查询（paged query）更高效：

• 自动管理分页状态（无需手动维护 offset 变量）
• 缓存已加载的所有数据，避免重复请求
• 内置加载/错误状态处理，不用自己编写冗余状态逻辑
• 自动拼接多页数据，直接生成完整列表
• 支持滚动触发加载时的防抖/节流，以及后台数据刷新

二、适配你的后端结构的具体实现 #

1. 编写分页查询函数 #

构造请求时，用 pageParam 作为当前的 offset，固定 limit 为10（可根据需求调整）：

const fetchSearchResults = async ({ pageParam = 0 }) => {
  const limit = 10;
  const res = await fetch(`https://some-endpoint/search?limit=${limit}&offset=${pageParam}`);
  return res.json();
};

2. 配置 useInfiniteQuery #

核心是通过 getNextPageParam 计算下一页的 offset，并判断是否还有更多数据：

import { useInfiniteQuery } from '@tanstack/react-query';

const { 
  data, 
  fetchNextPage, 
  hasNextPage, 
  isFetchingNextPage,
  isError,
  error
} = useInfiniteQuery({
  queryKey: ['search-results'], // 缓存唯一标识，可自定义
  queryFn: fetchSearchResults,
  // 计算下一页参数：如果下一个offset小于总结果数，返回offset，否则返回undefined（无更多数据）
  getNextPageParam: (lastPage) => {
    const nextOffset = lastPage.offset + lastPage.limit;
    return nextOffset < lastPage.totalResults ? nextOffset : undefined;
  },
  initialPageParam: 0, // 初始offset为0
});

// 合并所有分页的results为完整列表
const allResults = data?.pages.flatMap(page => page.results) || [];

3. 结合 React Native FlatList 实现无限滚动 #

用 onEndReached 触发下一页加载，底部显示加载状态：

import { FlatList, ActivityIndicator, Text } from 'react-native';

// 错误状态处理
if (isError) {
  return <Text>加载失败：{error.message}</Text>;
}

return (
  <FlatList
    data={allResults}
    keyExtractor={(item) => item.id} // 替换为你的数据唯一标识字段
    renderItem={({ item }) => (
      // 替换为你的列表项组件
      <Text>{item.title}</Text>
    )}
    // 滚动到距离底部10%时触发加载
    onEndReachedThreshold={0.1}
    onEndReached={() => {
      // 只有还有下一页且未在加载时，才触发请求
      if (hasNextPage && !isFetchingNextPage) {
        fetchNextPage();
      }
    }}
    // 底部加载指示器
    ListFooterComponent={() => {
      if (isFetchingNextPage) {
        return <ActivityIndicator size="small" style={{ padding: 10 }} />;
      }
      return null;
    }}
  />
);

4. 额外注意事项 #

• 如果需要刷新列表数据，可调用 refetch() 函数
• 可通过 staleTime 参数设置缓存有效期，避免频繁请求
• 若后端允许动态调整 limit，可将其作为参数传入查询函数

内容的提问来源于stack exchange，提问作者Cristian Flórez