React TanStack Query传参报错：client.defaultQueryOptions未定义

核心错误点 #

• useQuery参数格式错误：TanStack Query v4+版本中，useQuery仅接受单个配置对象，你拆分了两个对象传入，导致内部逻辑调用异常，触发client.defaultQueryOptions is not a function错误。
• myFetchFunction调用方式错误：该函数预期接收包含queryKey的对象参数，但你直接传递了三个原始值，导致解构失败。
• 自定义钩子命名不规范：React钩子必须以小写use开头，UseData不符合规范，会导致React无法识别为钩子。

修正后的代码 #

App.js（无需修改，确认版本兼容） #

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: 2 } },
});
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <QueryClientProvider client={queryClient}>
        ...所有组件
      </QueryClientProvider> 
  );
}

maps.js中的useData钩子 #

import { useQuery } from "@tanstack/react-query";
const baseUrl = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=${process.env.EXPO_PUBLIC_mapKey}`;

// 保持原函数逻辑，它会自动接收useQuery传入的queryKey参数
const myFetchFunction = async ({ queryKey }) => {
  const [_key, latitude, longitude, keywrd] = queryKey;
  try {
    const res = await fetch(
      `${baseUrl}&keyword=${keywrd}&location=${latitude}%2C${longitude}&radius=1500`
    );
    // 注意：Google Places API返回的有效数据在results字段下，不是data
    const { results } = await res.json();
    return results;
  } catch (err) {
    throw err;
  }
};

// 修正钩子命名为useData（小写use开头，符合React钩子规范）
export const useData = (key, latitude, longitude, keywrd) => {
  const { isLoading, isError, data } = useQuery({
    queryKey: ["waste", latitude, longitude, keywrd],
    // 直接传递myFetchFunction，useQuery会自动传入包含queryKey的参数
    queryFn: myFetchFunction,
    // 将staleTime合并到同一个配置对象中
    staleTime: 2592000000, // 30天缓存时长
  });

  return { isLoading, isError, data };
};

使用数据的组件 #

if (location) {
    // 调用修正后的useData钩子
    const { isLoading, isError, data } = useData(
      "DW",
      location.coords.latitude,
      location.coords.longitude,
      "waste"
    );
    if (!isLoading && data) console.log(data);
}

额外说明 #

• 确认你的@tanstack/react-query版本为v4或以上，v3及以下版本API格式不同，需对应调整参数结构。
• Google Places API返回的结构中，实际商家数据存于results字段，之前的data字段解构会导致获取不到有效内容，已同步修正。

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