时间戳

首页 > 解决方案 > react-query：如何在 onSuccess 回调中从 useQuery 获取数据？

reactjs - react-query：如何在 onSuccess 回调中从 useQuery 获取数据？

问题描述

我正在学习react-query，我遇到了一些问题。我想使用data我从 fetching data by中得到的useQuery，但我得到dataas 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就在这里。所以我认为我没有正确访问data我的onSuccess回调。那么我们如何才能访问data回调中的 呢？我试过了：

const query = useQuery("fetchData", fetchData, {
    onSuccess: () => {
      console.log("Get data!");
      console.log(query.data); // undefined
    }
  });

但仍然没有运气。

我阅读了文档并发现了这一点：

onSuccess: (data: TData) => void

所以我在我的代码中尝试了这个：

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)

谁能告诉我正确的方法吗？太感谢了！

这是一个演示。

标签： reactjsreact-query

解决方案

仅当从查询中检索到onSuccess时才调用回调函数。data请注意，这data不是您从useQuery返回对象中销毁的对象，而是在成功从 API 检索数据时传递给回调的对象。由于它是一个回调函数，因此您不需要检查等待/加载情况，因为如果您的请求成功，它最终会被调用。

在您的情况下，第一个data变量将在组件安装后undefined立即返回，因为调用是异步调用，这意味着从调用返回的数据需要从. 因此，它不会在组件安装后直接可用，而只有在查询成功解决后才可用。此外，react-query钩子调用回调，并使用在实际对象（钩子返回的对象）设置并从钩子返回之前接收到的数据。HomeuseQueryuseQueryPromiseHome useQueryonSuccess(data)datauseQuery

由于useQuery是异步调用（内部），它还提供了诸如、等request in-flight标志，您可以使用这些标志对数据、错误或任何其他合适的目的进行空检查。isLoadingisFetching

推荐阅读