本文详解在 react native + rtk query 构建的无限滚动场景下，如何确保页面切换时分页参数（如 page=1）被可靠重置，避免跨屏幕缓存污染，并提供可复用的 useresetonparamchange 自定义 hook 和最佳实践。
本文详解在 react native + rtk query 构建的无限滚动场景下，如何确保页面切换时分页参数（如 page=1）被可靠重置，避免跨屏幕缓存污染，并提供可复用的 useresetonparamchange 自定义 hook 和最佳实践。
在基于 RTK Query 的动态列表场景中（如按子分类加载商品），一个常见但易被忽视的问题是：分页状态未随路由参数变更而重置。例如，用户在「手机→iPhone」列表滚动至第 4 页后跳转至「电脑→MacBook」，新请求仍携带 page=4，导致首屏数据缺失或重复 —— 这并非 RTK Query 的 Bug，而是因 serializeQueryArgs 仅控制缓存键，不管理组件内部状态（如 useState(1) 的初始值）。
你的代码中已尝试用 useEffect 监听 categoryURI/subCategoryURI 变化并调用 setPage(1)，逻辑正确，但存在两个关键隐患：
- 竞态风险：useEffect 执行时机晚于首次 query 触发，可能导致首次请求仍使用旧 page 值；
- 冗余判断：手动维护 useRef 记录前值，代码可读性与健壮性不足。
✅ 推荐解决方案：封装高内聚的自定义 Hook，将“参数变更 → 重置分页”逻辑与组件解耦。
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
✅ 正确做法：使用 useResetOnParamChange
// hooks/useResetOnParamChange.ts
import { useEffect, useRef } from 'react';
/**
* 在指定依赖项变更时，自动重置分页状态为 1
* @param dependencies 路由参数等触发重置的依赖数组
* @param setPage 分页状态 setter 函数
*/
export const useResetOnParamChange = (
dependencies: unknown[],
setPage: (page: number) => void
) => {
const prevDepsRef = useRef<unknown>([]);
useEffect(() => {
// 浅比较依赖项是否变化（适用于字符串、数字等基础类型）
const hasChanged = dependencies.some((dep, i) =>
dep !== prevDepsRef.current[i]
);
if (hasChanged) {
setPage(1);
prevDepsRef.current = [...dependencies];
}
}, [dependencies, setPage]);
};</unknown>
✅ 在组件中集成（简洁、可靠、无竞态）
const SubCategoryScreen = () => {
const [page, setPage] = useState(1);
const [limit] = useState(20); // limit 通常固定，无需重置
const route = useRoute<homeroutestackprops>>();
const { categoryTitle, subcategoryName } = route.params;
const categoryURI = encodeURIComponent(categoryTitle);
const subCategoryURI = encodeURIComponent(subcategoryName);
// ✅ 关键：在依赖变更时自动重置 page
useResetOnParamChange([categoryURI, subCategoryURI], setPage);
// ✅ 首次加载时确保 page=1 已生效（规避 useEffect 延迟）
const { data: productsData, isFetching, ...queryResult } =
useGetProductsBySubCategoryQuery({
limit,
page,
category: categoryURI,
subCategory: subCategoryURI,
});
const products = productsData?.data.products ?? [];
// 其他逻辑（FlatList 滚动、Header 设置等）保持不变...
return (
<flatlist ref="{productRef}" data="{products}" renderitem="{({" item><productcard product="{item}"></productcard>}
onEndReached={() => !isFetching && setPage(prev => prev + 1)}
onEndReachedThreshold={0.1}
keyExtractor={(item) => item.id}
/>
);
};</flatlist></homeroutestackprops>
⚠️ 注意事项与进阶建议
- serializeQueryArgs 不影响状态重置：它仅决定缓存键（如 "getProductsBySubCategory-category1-sub1"），与 page 状态无关。务必通过组件状态管理重置逻辑。
- 避免在 forceRefetch 中重置状态：forceRefetch 用于强制刷新当前查询，而非初始化状态，不应混用。
-
深层对象参数？改用 JSON.stringify 比较：若依赖项含对象，需深比较：
const depsString = JSON.stringify(dependencies); if (depsString !== prevDepsRef.current) { setPage(1); prevDepsRef.current = depsString; } - 服务端分页兼容性：确保后端接口对 page=1 返回首屏数据（而非跳过前 N 条），这是重置逻辑生效的前提。
- 调试技巧：在 useGetProductsBySubCategoryQuery 的 query 函数中添加 console.log({ page, category, subCategory })，验证请求参数是否符合预期。
✅ 总结
重置分页状态的本质是同步路由参数变更与本地状态。与其在每个页面重复 useRef + useEffect 模板代码，不如抽象为可复用的 useResetOnParamChange Hook。它消除竞态、提升可维护性，并与 RTK Query 的缓存策略（serializeQueryArgs）正交协作 —— 缓存键保证数据隔离，Hook 保证状态纯净。最终实现：每次进入新分类，必从第一页开始加载，体验一致且可预测。
