React Query useInfiniteQuery滚动加载重复旧数据，实现是否有误？

你的问题核心是**getNextPageParam返回的下一页参数错误**，导致每次触发fetchNextPage时都请求了/?pages=0的旧数据，同时还有几处细节需要修正：

1. 修复getNextPageParam逻辑 #

当前你返回的allData.length -1会导致下一页参数始终是0（第一次请求后allData.length是1，1-1=0），所以每次都重复请求第一页。正确逻辑应该是根据当前页码递增，同时判断是否还有更多数据：

useInfiniteQuery({
  queryKey: ["reports"],
  getNextPageParam: (prevData, allData) => {
    // 假设每页最多10条数据，如果当前页数据少于10，说明没有下一页
    const currentPage = allData.length - 1; // allData是已请求的页面数组，长度-1就是当前最后一页的页码
    return prevData.length < 10 ? false : currentPage + 1;
  },
  queryFn: ({ pageParam = 0 }) => {
    return GetUserReports(pageParam);
  },
});

2. 简化HandleScroll逻辑 #

不需要自己额外判断，直接使用useInfiniteQuery返回的内置状态：

const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery(/* 配置项 */);

const HandleScroll = () => {
  if (!isFetching && hasNextPage) {
    fetchNextPage();
  }
};

3. 修正FlatList的renderItem参数 #

renderItem接收的是包含item属性的对象，直接用item会导致传递错误数据：

<FlatList
  initialNumToRender={3}
  showsVerticalScrollIndicator={false}
  estimatedItemSize={3}
  data={data?.pages.flat() || []} // 简化数组扁平化写法
  removeClippedSubviews={true}
  windowSize={5}
  onEndReached={HandleScroll}
  onEndReachedThreshold={1}
  renderItem={({ item }) => { // 解构出实际数据项
    return <Report report={item} />;
  }}
  keyExtractor={(item, index) => index.toString()} // 可选：添加唯一key避免渲染警告
/>

额外验证点 #

确保GetUserReports函数正确将pageParam拼接到请求URL：

const GetUserReports = (page) => {
  return fetch(`/your-api-path/?pages=${page}`).then(res => res.json());
};

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