React中URL查询参数更新后产品数据未更新的问题求解

架构老林

2026-7-2

问题解决：URL参数更新后React Query数据不刷新的问题

核心问题

你的useProductQuery里的queryKey只写了['PRODUCTS_KEY']，完全没把page参数包含进去。React Query是靠queryKey识别不同查询的，只要queryKey不变，就算你传的page变了，它也不会重新发起请求，直接用缓存里的旧数据。

另外还有两个小细节：

从URL拿到的page是字符串类型，你的API大概率需要数字类型，直接传可能会出问题
pageNum初始是null，第一次调用时传null给useProductQuery，可能不符合API的参数要求

修复步骤

1. 修正`useProductQuery`的queryKey和参数处理

把page加入queryKey，同时处理参数的默认值和类型转换：

export const useProductQuery = (page?: string | null) => {
  // 处理page参数：转成数字，默认1
  const targetPage = page ? Number(page) : 1;

  const { data, ...rest } = useQuery({
    // 把page加入queryKey，page变化时自动触发新查询
    queryKey: ['PRODUCTS_KEY', targetPage],
    queryFn: async () => await getAll(targetPage),
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: true
  })

  return { data, ...rest }
}

2. 简化组件里的参数获取（可选）

你不需要用useState存pageNum，直接解析URL参数后传给Hook就行，减少不必要的state：

const location = useLocation();

// 直接解析当前page参数
const currentPage = new URLSearchParams(location.search).get('page');

const { isLoading:isPld, isError:isPe, data:productData } = useProductQuery(currentPage);
const modifiedProductData = productData as IProduct[];

useEffect(() => {
  console.log(productData);
}, [productData]);

如果一定要保留pageNum的state，那也没问题，只要Hook的queryKey包含page就可以，上面的Hook修复后，原来的组件代码也能正常工作。