React Native中使用RTK Query重置页面状态的问题排查

你遇到的核心问题是：当路由参数（category/subcategory）变化时，组件重新渲染但page状态仍保留之前的数值，导致RTK Query立即用旧的page值发起新分类的请求，之后才通过useEffect异步重置page为1，最终出现新页面请求携带旧页码的情况。

通过在渲染阶段直接判断分类是否切换，强制初始请求使用page=1，同时同步更新page状态和分类标识缓存，确保后续无限滚动从正确页码开始。

修改后的组件代码 #

const SubCategoryScreen = () => {
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);

  const {
    params: { categoryTitle, subcategoryName },
  } = useRoute<HomeRouteStackProps<"SubCategories">>();

  const navigation = useNavigation<NavigationPropTypes<"Home">>();
  const productRef = useRef<FlatList>(null);

  const categoryURI = encodeURIComponent(categoryTitle);
  const subCategoryURI = encodeURIComponent(subcategoryName);

  // 用ref跟踪上一次的分类标识
  const prevCategoryURI = useRef(categoryURI);
  const prevSubCategoryURI = useRef(subCategoryURI);

  // 判断是否切换了分类，强制初始请求用page=1
  const shouldUsePage1 = categoryURI !== prevCategoryURI.current || subCategoryURI !== prevSubCategoryURI.current;
  const queryPage = shouldUsePage1 ? 1 : page;

  const {
    isLoading: loadingProducts,
    data: productsData,
    error: productError,
    isFetching,
    currentData,
    refetch
  } = useGetProductsBySubCategoryQuery({
    limit,
    page: queryPage,
    category: categoryURI,
    subCategory: subCategoryURI,
  });

  const products = productsData?.data.products ?? [];

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  useEffect(() => {
    if (productRef.current) {
      productRef.current.scrollToOffset({ offset: 0, animated: true });
    }
  }, [categoryURI, subCategoryURI]);

  useEffect(() => {  
    if (shouldUsePage1) {
      console.log("Resetting page due to category/subcategory change");
      // 同步更新page状态和ref记录
      setPage(1);
      prevCategoryURI.current = categoryURI;
      prevSubCategoryURI.current = subCategoryURI;
      // 双重保障：确保用page=1重新请求
      refetch({ limit, page: 1, category: categoryURI, subCategory: subCategoryURI });
    }
  }, [categoryURI, subCategoryURI, shouldUsePage1, refetch, limit]);

  return (
      /* JSX Elements */
    )
};

RTK Query配置说明 #

你的现有RTK Query配置无需修改：

• serializeQueryArgs已正确将category和subCategory作为缓存键，切换分类时会生成新的缓存条目；
• merge逻辑能正确合并同一分类下的多页数据，满足无限滚动需求；
• forceRefetch会在参数变化时重新发起请求，符合业务逻辑。

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