React组件内useQuery钩子持续触发执行问题咨询

云上老周

2026-10-9

useQuery持续触发请求的问题原因及修复方案

核心错误原因

你代码中最根本的问题是 useQuery 第二个参数的用法不符合规范：React Query要求第二个参数是待执行的异步函数本身，而你当前写的是 GET_DATA(token)，相当于组件每次渲染时都会直接执行这个接口请求函数，自然会触发无限调用。

修复步骤

第一步：调整useQuery的传参写法，用匿名函数包裹接口调用，把执行权交给React Query控制：

import { GET_DATA } from 'apiCalls';
const { loading, error, data } = useQuery('getData', () => GET_DATA(token));

第二步（可选但推荐）：如果token是会动态变化的变量，需要把变量放到查询键数组中，React Query会根据查询键做缓存匹配，只有查询键变化时才会重新发起请求：

const { loading, error, data } = useQuery(['getData', token], () => GET_DATA(token));

第三步：修正接口请求的错误处理逻辑，你当前在catch块中直接返回错误对象，会让React Query判定为请求成功，不符合错误状态的预期，也可能间接导致异常重查，建议改为抛出错误让React Query接管错误逻辑：

export const GET_DATA = async (token) => {
  try {
      const res = await axios.get(`${process.env.REACT_APP_SERVER}/api/...`, {
          headers: {'auth-token': token},
      });
      console.log(res);
      return res.data;
  } catch (err) {
      console.log('Error getting data');
      throw err;
  }
}