React Query useQuery点击无法重复触发请求问题排查

核心问题拆解 #

1. useQuery 查询Key无效
   你写的查询Key是[some-{id}]，这是个固定字符串，完全没用到传入的id变量。react-query靠Key区分不同查询，Key不变的话，哪怕调用refetch，也会判定为同一个查询，不会触发isLoading这类状态的重新变更。

2. 请求URL未动态关联ID
   useQuery的第二个参数直接传了静态字符串'some-url'，没有根据选中的ID拼接动态地址。这导致不管点哪一行，请求的都是同一个接口，数据不会变化，状态自然也不会更新。

3. 状态触发逻辑有漏洞
   isFetched在第一次请求完成后就会一直保持true，重复点击同一行时这个状态没变化，依赖它的useEffect不会重新执行，自然打不开新标签。

4. 代码拼写错误
   handleClick里的setSelectedId(Id);是大写的Id，但参数是小写的id，导致selectedId根本没更新，请求参数完全错误。

修复步骤 #

1. 修正useQuery配置

把查询Key改成包含动态ID的数组，同时让请求URL关联选中的ID：

const [selectedId, setSelectedId] = useState();

const {
  isSuccess, // 用isSuccess替代isFetched，每次请求成功都会触发
  isLoading,
  data,
  refetch,
} = useQuery(
  ['product-detail', selectedId], // 把selectedId作为Key的一部分，确保不同ID对应不同查询
  () => fetch(`some-url/${selectedId}`).then(res => res.json()), // 动态生成请求地址
  { enabled: false }
);

2. 调整点击事件逻辑

去掉没必要的await，直接更新ID后调用refetch，或者更干脆在请求成功后直接打开新标签（不用依赖useEffect）：

const handleClick = async (product, label, id) => {
  setSelectedId(id);
  const { data: detailData } = await refetch();
  if (detailData) {
    const link = getQueryParamsString(detailData);
    window.open(link, '_blank');
  }
};

如果不想手动调用refetch，可以把enabled设为!!selectedId，让useQuery自动监听ID变化触发请求：

const { isSuccess, data } = useQuery(
  ['product-detail', selectedId],
  () => fetch(`some-url/${selectedId}`).then(res => res.json()),
  { enabled: !!selectedId } // 当selectedId存在时自动发起请求
);

const handleClick = (product, label, id) => {
  setSelectedId(id);
};

3. 修正新标签触发逻辑

如果用自动触发的方式，就依赖isSuccess和data来打开新标签，因为isSuccess会在每次请求成功后变为true：

useEffect(() => {
  if (isSuccess && data) {
    const link = getQueryParamsString(data);
    window.open(link, '_blank');
  }
}, [isSuccess, data]);

状态变化异常的原因 #

• 重复点击同一行时，因为查询Key不变，react-query复用了缓存，不会重新触发isLoading，而isFetched是一次性状态，首次请求后就不会再变，所以没有状态更新日志。
• 点击另一行时，假设你实际代码里URL是动态的（示例写错了），数据确实更新了，但因为Key没变化，react-query没把它当成新请求，所以只有data变化触发日志，isLoading和isFetched不会动。

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