react query:如何在useQuery回调中从onSuccess获取数据？
我正在学习react-query，我遇到了一些问题。我想使用通过useQuery获取数据所获得的useQuery，但我将data作为undefined。这是我的代码：
import React from "react";
import { useQuery } from "react-query";
import { fetchData } from "./providesData";
const Home = () => {
const {data} = useQuery("fetchData", fetchData, {
onSuccess: () => {
console.log("Get data!");
console.log(data); // undefined
}
});
return <div></div>;
};
export default Home;但我在react-query devtools中看到，获取成功了，data在这里。因此，我认为我没有正确地访问onSuccess回调中的onSuccess。那么，我们如何在回调中访问data呢？我试过：
const query = useQuery("fetchData", fetchData, {
onSuccess: () => {
console.log("Get data!");
console.log(query.data); // undefined
}
});但还是没有运气。
我读了文档，发现了以下内容：
onSuccess：(数据: TData) =>无效
所以我在我的代码中尝试了这个：
const {data} = useQuery("fetchData", fetchData, {
onSuccess: (data: TData) => {
console.log("Get data!");
console.log(data); // success
}
});这次起作用了。但我不明白为什么..。代码编辑器也警告我：
Type annotations can only be used in TypeScript files.ts(8010)有人能告诉我正确的方法吗？非常感谢!
这是一个演示。
Stack Overflow用户
发布于 2021-06-28 00:09:13
只有在从查询中检索到onSuccess时才调用data回调函数。请仔细注意，这个data不是您正在从useQuery返回对象中销毁的那个，而是在成功从useQuery中检索数据时传递给回调的那个。因为它是一个回调函数，所以不需要检查等待/加载情况，因为如果请求成功，最终会调用它。
在您的示例中，第一个data变量将在Home组件挂载后立即返回undefined，因为useQuery调用是异步调用，这意味着从useQuery调用返回的数据将需要从解析因此，一旦Home组件挂载，它就不会直接可用，而只能在查询成功解析后才可用。此外，react-query useQuery钩子使用实际的data对象(由useQuery钩子返回的对象)设置并从钩子返回之前接收的数据调用onSuccess(data)回调。
由于useQuery是一个异步调用(内部)，它还提供了request in-flight标志，如isLoading、isFetching等，您可以使用这些标志来检查数据、错误或任何其他合适的用途。
https://stackoverflow.com/questions/68156096
复制相似问题
腾讯云开发者
