使用React时，查询返回undefined

Question

所以我在学习React Query我已经按照它需要的方式编写了所有的代码这是App组件

中的代码

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryclient = new QueryClient();
function App() {
return (
<div className="flex flex-col w-[70%] justify-center items-center">
<QueryClientProvider client={queryclient}>
<BrowserRouter>
<Routes>
<Route path="/" element={<Mainpage />} />
<Route path="/add" element={<Shtoprod />} />
<Route path="/hiq" element={<Hiqprod />} />
<Route
path="*"
element={
<h1 className="text-warning font-primaryFont font-bold text-8xl my-10">
Faqja nuk u gjetë
</h1>
}
/>
</Routes>
<Form />
</BrowserRouter>
</QueryClientProvider>
</div>
);
}

这是组件内的代码，我试图使用React Query

import { useQuery } from "@tanstack/react-query";
const { produktet } = useQuery({
queryKey: ["gjerat"],
queryFn: () => {
return Axios.get("http://localhost:3500/dat").then((res) => res.data);
},
});
console.log(`Prod: ${produktet}`);

该代码位于组件

中我尝试从json-server获取数据，但当我使用React Query时它总是返回undefined，但当我尝试使用Axios或取回时，它会工作。我想知道问题出在哪里。

Answer 1

您需要从useQuery钩子中解构data属性而不是produktet:

const { data: produktet, isLoading, error } = useQuery("gjerat", fetchProducts);