React Query调用API时无法传递参数至接口URL问题排查

问题根源 #

你的代码存在两个关键错误，导致参数无法正确传递并获取API数据：

1. 查询函数未返回异步请求结果
   在useQuery的第二个参数中，你调用了myFetchFunction但没有返回它的执行结果。React Query需要依赖这个异步函数返回的Promise来跟踪请求状态，不返回的话就无法获取到API返回的数据。

2. 错误处理方式不符合React Query规范
   在myFetchFunction的catch块里返回<Error />组件是不合理的。React Query会自动管理请求错误状态，你应该通过isError状态来渲染错误组件，而非把组件作为数据返回。

修正后的代码 #

useData.js #

import { useQuery } from "@tanstack/react-query";
import Error from "./Components/Error";

const myBaseUrl = "http://api.weatherapi.com/v1/forecast.json?key=59e580ae2ccf422c9fd551122xxxx";

const myFetchFunction = async (latitude, longitude) => {
  console.log(latitude);
  try {
    const res = await fetch(
      `${myBaseUrl}&q=${latitude},${longitude}&aqi=yes&days=7`
    );
    // 手动检查响应状态，HTTP 4xx/5xx时抛出错误
    if (!res.ok) {
      throw new Error(`请求失败：状态码 ${res.status}`);
    }
    const datez = await res.json();
    return datez;
  } catch (err) {
    console.log(err);
    // 抛出错误，让React Query触发isError状态
    throw err;
  }
};

// 移除冗余的key参数，queryKey已包含请求唯一标识
export const UseData = (latitude, longitude) => {
  const { isLoading, isError, data } = useQuery(
    ["myData", latitude, longitude],
    // 返回异步请求的Promise
    () => myFetchFunction(latitude, longitude),
    {
      cacheTime: 3600000,
    }
  );
  return { isLoading, isError, data };
};

mainScreen.js #

// 调用时移除多余的key参数
const { data, isLoading, isError } = UseData(34.16, 23.14);

// 根据isError状态渲染错误组件
if (isError) {
  return <Error />;
}

额外优化建议 #

• 推荐通过queryKey解构获取参数（如下示例），这样当参数变化时，React Query会自动触发重新请求，逻辑更统一：

  () => {
    const [_, lat, lon] = queryKey;
    return myFetchFunction(lat, lon);
  }
  

• 必须检查res.ok，因为fetch在HTTP 4xx/5xx状态下不会自动抛出错误，手动抛出后才能让React Query正确捕获错误并更新isError状态。

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