如何在useQuery组件中按商品ID/别名获取数据？当前数据重复

你遇到的问题核心是查询键没有包含唯一标识，React Query 会通过查询键来缓存和区分不同的请求。你现在所有组件用的查询键都是 ["cart"]，不管商品ID是什么，都会复用同一份缓存数据，自然显示相同内容。

修复步骤： #

• 把商品ID（item?.ProductID）加入查询键，让每个请求的键唯一
• 优化请求函数，把ProductID作为参数传入，避免闭包导致的变量捕获问题

修正后的代码： #

// 把ProductID作为参数传入，避免依赖外部变量
const fetchCartItem = async (productId) => {
  if (!token || !productId) return {};
  
  const { data } = await axios.get(
    API.GET_PRODUCT_DETAILS_BY_PRODUCT_ID.replace("[ProductID]", productId),
    { headers: { Authorization: token } }
  );
  
  setCartLoading(false);
  return data?.product || {};
};

// 查询键加入productId，确保每个商品的请求缓存独立
const {
  isLoading: itemLoading,
  refetch: cartRefetch,
  data: cart,
} = useQuery(
  ["cart", item?.ProductID], // 这里把ProductID加入查询键
  () => fetchCartItem(item?.ProductID),
  {
    enabled: !!item?.ProductID, // 可选：只有当ProductID存在时才发起请求
  }
);

额外说明： #

• 查询键是React Query缓存机制的核心，任何影响请求结果的变量都应该加入查询键
• 加enabled选项可以避免在item?.ProductID为空时发起无效请求
• 把请求函数的依赖参数显式传入，能避免组件重渲染时的闭包问题，保证请求用的是最新的ProductID

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