我试图使用tan栈查询缓存来自Google Places Api的数据,但每当我传递参数时,我都会收到这个错误

TypeError:client.defaultQueryOptions不是函数.(在‘client.defaultQueryOptions(Options)’中,‘client.defaultQueryOptions’未定义)

//我的App.js

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: 2 } },
});
export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <QueryClientProvider client={queryClient}>
      ...all components
      </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}`;
const myFetchFunction = async ({ queryKey }) => {
  const [_key, latitude, longitude, keywrd] = queryKey;
  try {
    const res = await fetch(
      `${baseUrl}&keyword=${keywrd}&location=${latitude}%2C${longitude}&radius=1500`
    );
    const { data } = await res.json();
    return data;
  } catch (err) {
    throw err;
  }
};
export const UseData = (key, latitude, longitude, keywrd) => {
  const { isLoading, isError, data } = useQuery(
    {
      queryKey: ["waste", latitude, longitude, keywrd],
      queryFn: ()=>myFetchFunction(latitude, longitude, keywrd),
    },
    {
      staleTime: 2592000000,
    }
  );

  return { isLoading, isError, data };
};

我要在其中使用数据的组件,其中位置是坐标的一个标准

if (location) {
    const { isLoading, isError, data } = UseData(
      "DW",
      location.coords.latitude,
      location.coords.longitude,
      "waste"
    );
    if (!isLoading && data) console.log(data);

有人能告诉我怎么改正这个代码吗?

推荐答案

我根据Reaction Query v4编写语法,而在v5中,选项是同一对象的一部分.像这样重构了代码

async function fet(...args) {
    try {
      const res = await fetch(...args);
      return await res.json();
    } catch (err) {
      throw err;
    }
  }

const { data, isLoading, isError } = useQuery({
    queryKey: ["Dwaste", latitude, longitude, keywrd],
    queryFn: () =>
      fet(
        `${baseUrl}keyword=${keywrd}&location=${latitude}%2C${longitude}&radius=1500&key=${process.env.EXPO_PUBLIC_mapi}`
      ),
    staleTime: 2592000,
  });

Reactjs相关问答推荐

无法使用#13;或br将新行设置为文本区域'"&"<>

Redux向后端发送请求时出现钩子问题

通过单击具有此值的按钮将值添加到数组对象键

如何在React中的textarea中显示字符数?

单击空白区域时,Reaction Multiple下拉组件不关闭

App.js中的H2组件不会动态呈现.这可能是什么问题?

Reaction中的数据加载不一致

Reaction Google Maps API无法获取标题

蚂蚁 Select .列表弹出窗口不会';有时不会出现

我如何使用 React toastify (Promise) toast 和邮箱 js

Zod 验证模式根据另一个数组字段使字段成为必需字段

运行 npm run build 出现问题

使用带有搜索字符串的全局过滤器时如何在 React-Table 中进行精确匹配?

如何在react 中正确销毁上下文?

导入样式化组件时未导入组件内容

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

setState 改变对象引用

如何制作基于对象 struct 呈现数据的可重用组件?

谁能根据经验提供有关 useEffect 挂钩的更多信息

在react 钩子中将数组添加到数组状态给出一个数字