首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Hooks和React Query (useQuery):仅在单击按钮时调用API调用/查询

基础概念

React Hooks 是 React 16.8 版本引入的一个新特性,它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种在函数组件中使用 state 和生命周期方法的方式。

React Query (useQuery) 是一个用于数据获取和管理的库,它与 React Hooks 结合使用,可以轻松地从 API 获取数据并在组件中使用。useQuery 是 React Query 提供的一个 Hook,用于在组件中执行查询。

相关优势

  1. React Hooks
    • 简洁性:函数组件更加简洁,易于理解和维护。
    • 复用性:Hooks 可以在多个组件之间共享逻辑。
    • 性能优化:Hooks 可以更好地控制组件的渲染和更新。
  • React Query (useQuery)
    • 自动管理数据获取:自动处理数据获取、缓存和更新。
    • 错误处理:内置错误处理机制。
    • 查询取消:支持在组件卸载时取消查询,避免不必要的网络请求。
    • 缓存机制:自动缓存查询结果,提高性能。

类型

  • React Hooks
    • useState:用于管理组件的 state。
    • useEffect:用于处理副作用,如数据获取和订阅。
    • useContext:用于访问 React 的 Context API。
  • React Query (useQuery)
    • useQuery:用于执行查询并获取数据。
    • useMutation:用于执行数据修改操作,如 POST、PUT、DELETE 等。

应用场景

  • React Hooks
    • 在任何需要管理 state 或副作用的函数组件中使用。
    • 用于实现自定义 Hooks,以便在多个组件之间共享逻辑。
  • React Query (useQuery)
    • 在需要从 API 获取数据并在组件中使用的场景中使用。
    • 适用于需要管理复杂数据获取逻辑的应用,如分页、无限滚动、实时数据更新等。

示例代码

以下是一个使用 useQuery 在单击按钮时调用 API 的示例:

代码语言:txt
复制
import React from 'react';
import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const MyComponent = () => {
  const { data, isLoading, error } = useQuery('myData', fetchData, {
    enabled: false, // 默认不执行查询
  });

  const handleClick = () => {
    // 在单击按钮时启用查询
    queryClient.setQueryData('myData', null);
  };

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <button onClick={handleClick}>Fetch Data</button>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

export default MyComponent;

遇到的问题及解决方法

问题:为什么在单击按钮时没有调用 API?

原因

  1. useQueryenabled 选项默认设置为 false,因此查询不会自动执行。
  2. 需要在单击按钮时手动启用查询。

解决方法

  1. useQuery 中设置 enabled: false,以便默认不执行查询。
  2. 在单击按钮时,使用 queryClient.setQueryData('myData', null) 手动启用查询。

参考链接

希望这些信息对你有所帮助!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Query 指南,目前火热的状态管理库!

UseQuery 是一个 React hook,它需要三个参数: 1.查询关键字 2.查询函数 3.配置项 让我们从第一个参数开始。查询关键字是 React Query 用于识别你的查询的关键字。...通过该关键字,React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询,你还可以使用 React Query 客户端通过代码重置查询或更改值。...这个 hook 的结果有三个重要的属性: data:此属性包含查询函数的结果。请注意数据也可能为 undefined;这是因为在第一次调用时,当请求处于等待状态,data 尚未呈现。...React Query 提供的两个 hooks:useIsFetching useIsMutation。 这些 hooks 可用于了解应用程序中是否存在获取请求或突变请求正在进行。...它仅在条件process.env.NODE_ENV === 'development'为 true 才渲染该组件。 如果需要,你可以自定义该组件或强制在生产模式下渲染它。

3.7K42
  • react-query解决你一半的状态管理问题

    你可以从这里[2]看到他们的区别 初识React-Query React-Query是一个基于hooks的数据请求库。...我们可以将刚才的例子用React-Query改写: import { useQuery } from 'react-query' function App() { const {data,...不仅如此,React-Query还为我们做了如下工作: 多个组件请求同一个query只发出一个请求 缓存数据失效/更新策略(判断缓存合适失效,失效后自动请求数据) 对失效数据垃圾清理 数据的CRUD由...2个hook处理: useQuery处理数据的查 useMutation处理数据的增/删/改 在下面的例子中,点击「创建用户」按钮会发起创建用户的post请求: import { useQuery,...所以我们需要告诉React-Query,userData query对应的缓存已经失效,需要更新: import { useQuery, queryCache } from 'react-query';

    2.6K10

    react-query从拒绝到拥抱

    react-query是一位数据获取专家,能够智能管理请求的一切内容,包括数据、状态、缓存,更新等,基于Hooks。...的star数量 axios .get("https://api.github.com/repos/tannerlinsley/react-query") .then((res...获得了{starCount}颗星; } 复制代码 那么现在需要加个需求,由于网络可能较慢,需要加个loadingerr,来解决用户等待响应过程的难受出错后让用户可以点击按钮重新获取数据,...复制代码 Mutation(突变) 用来创建/更新/删除数据使用,最典型的例子就是一个todoList,对todo进行增删改相关的请求。使用useMutation hooks。..., useQuery } from "react-query"; import { useQueryClient } from 'react-query'; import { ReactQueryDevtools

    2.7K31

    使用React-Query解决接口请求的麻烦事

    管理内存和服务器状态的垃圾收集 使用结构共享记忆查询结果 直到React-Query的出现,上面的问题都变得迎刃而解。...React-Query React Query 是一个开箱即用,零配置的服务端状态管理库,支持RestfulGraphQL两种类型的请求,它能帮助你很好的获取、同步、管理和缓存你的远程数据。...它提供了几个简单的Hooks,借助它们可以很轻松的完成对后端数据的增删改查等操作,无需再写繁琐的数据拉取状态判断等代码。...onError: 失败的回调 返回的数据useQuery基本是相同的,这里的mutate则是触发更改的方法,如果我们想执行useMutation中传入的方法,我们只需要调用mutate即可,传给mutate...,不必担心构建需要排除他们 浮动模式下开启,会将devtools作为固定的浮动元素安装在开发的应用程序中,并在屏幕一角提供一个切换按钮以显示隐藏devtools 在devtools中我们可以直观的看到已经缓存下来的数据整个项目的配置

    96030

    React 设计模式 0x6:数据获取

    提供了一个内置的钩子函数 useCallback,允许您对耗费性能的函数进行记忆化,以避免在每次重新渲染时调用它们 只需传入一个函数一个依赖数组,useCallback 将仅在依赖中的一个值发生变化时重新计算记忆化的函数...此外,您可以获取数据并将其存储在 React 应用程序状态中。 # React Query React Query 是一个库,用于处理 React 应用程序中的数据获取管理。...它提供了许多有用的功能,如数据缓存、自动重试、请求取消突变。 React Query 的目标是提供一个简单的 API,让数据获取管理变得更加容易,并且可以与现有的代码库集成。...通过使用 React Query,开发者可以快速地处理数据获取管理,同时保持 React 应用程序的高性能可伸缩性。..., error, data } = useQuery("repoData", () => fetch("https://api.github.com/repos/tannerlinsley/react-query

    1.2K20

    React 中请求远程数据的四种方法

    但是上面的状态声明 useEffect 都是模版。如果我要进行许多 HTTP 调用,我不想为每个调用重复维护大约 20 行代码。内联调用让你的代码变得很丑。...此外,如果调用被复用,则很容易从这个集中位置调用它们。 然而,我们还可以做得更好。 方式3:自定义Hook 借助 React Hooks 的魔力,我们终于可以集中处理重复的逻辑。...你想在用户重新调整标签重新获取新数据吗?如何消除重复查询? 你可以不断完善这个自定义Hook来完成所有这些操作。...但是,您应该只需要方式4: 方式4:react-query/swr 使用 react-query或swr,可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

    4.1K10

    React 中请求远程数据的四种方法

    但是上面的状态声明 useEffect 都是模版。如果我要进行许多 HTTP 调用,我不想为每个调用重复维护大约 20 行代码。内联调用让你的代码变得很丑。...此外,如果调用被复用,则很容易从这个集中位置调用它们。 然而,我们还可以做得更好。 方式3:自定义Hook 借助 React Hooks 的魔力,我们终于可以集中处理重复的逻辑。...你想在用户重新调整标签重新获取新数据吗?如何消除重复查询? 你可以不断完善这个自定义Hook来完成所有这些操作。...但是,您应该只需要方式4: 方式4:react-query/swr 使用 react-query或swr,可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。.../services/userService"; import { useQuery } from "react-query"; export default function ReactQueryDemo

    2.3K30

    探索 React 状态管理:从简单到复杂的解决方案

    然后,我们定义了两个函数incrementdecrement,它们分别使用setCount函数增加减少count的值。这些函数在对应的按钮被点击时调用。...当单击增量或减量按钮,我们使用dispatch函数分派相应的动作。利用React Query进行服务器状态管理对于涉及服务器端状态管理(如数据获取和缓存)的情景,我们引入React Query。...import React from 'react';import { useQuery, useMutation, QueryClient, QueryClientProvider } from 'react-query...在handleSubmit函数内部,我们调用mutation.mutateAsync以向服务器发送新数据对象。我们呈现数据一个提交按钮。在加载,我们显示加载消息;如果有错误,我们显示错误消息。...像Context API这样的简单解决方案通常足以满足较小项目的要求,并避免不必要的复杂性。通过理解不同状态管理方法的优势权衡,您可以在选择正确解决方案做出明智的决策。

    45131

    为什么我不再用Redux了

    React Query 我已经在自己的多数个人和工作项目中使用 React Query 几个月了。这个库有一个非常简单的 API 几个 hooks,用于管理查询(获取数据)突变(更改数据)。...要对比这个库 Redux 的话,我们来看这两种方法的一个代码示例。我使用常规 JS、React Hooks axios 实现了一个从服务器获取的简单 TODO 列表。...下面是使用 React Query 实现的相同示例: import React from "react"; import { useQuery } from "react-query"; import...只要函数是异步的,实现就无关紧要——你可以轻松地使用 Fetch API 代替 Axios。 要更改后端状态React Query 提供了 useMutation hook。...React Query SWR 大约是在同一间开始开发的,并且以积极的方式相互影响。在 react-query 文档中也对这两个库进行了彻底的比较。

    2.6K20

    如何使用 Nx、Next.js TypeScript 构建 Monorepo

    它可以通过access_token访问,它可以从Product Hunt API Dashboard生成。 要创建新的应用程序,我们需要单击“添加应用程序”按钮。...接下来,我们可以为我们的应用程序添加一个名称,并为我们的新应用程序添加https://localhost:4200/作为重定向 URI,然后单击“创建应用程序”按钮。...接下来,我们需要通过单击同一页面中的CREATE TOKEN按钮来生成Developer Token。 这将生成一个新令牌并将其显示在页面上。 接下来,我们需要将这些凭据存储在我们的应用程序中。..."; import memCache from "graphql-hooks-memcache"; import { useMemo } from "react"; let graphQLClient...; 上面的 GraphQL 查询将允许我们从 ProductHunt GraphQL API 端点获取所有帖子。

    5.8K51

    使用React Query做为axios请求库的上层封装

    hooks再封装下这个请求,包括loading等中间态的封装,处理的优雅一点 import React, {useState,useEffect} from 'react'; import axios...Query React Query React Query 通常被描述为 React 缺少的数据获取(data-fetching)库,但是从更广泛的角度来看,它使 React 程序中的获取,缓存,同步更新服务器状态变得轻而易举...解决了什么问题 服务端状态有以下特点: 存储在远端,本地无法直接控制 需要异步 API查询更新 可能在不知情的情况下,被另一个请求方更改了数据,导致数据不同步 现有的状态管理库(如 Mobx、Redux...」 对于数据的变化尽可能快得做出响应 分页查询懒加载等请求性能优化 管理服务器状态的内存垃圾回收 通过结构共享(structural sharing)来缓存查询结果 请求中间态处理 function...举个例子: import React from "react"; import { useQuery, queryCache } from "react-query"; import ".

    2.2K30

    129.精读《React Conf 2019 - Day2》

    这个签名包含了 hooks 参数名: // signature: "useState{isLoggedIn}" function ExampleComponent() { const [isLoggedIn...混合导出 React React 组件无法精确的 hot reload。 更高的内存要求。...队列加载 假设 Composer 与 NewsFeed 组件内部都通过 useQuery 取数,那么并行取数加载机制如下: 这可能有两个问题:组件内部加载顺序不统一与组件间加载顺序不统一。...(query, reference); 可以看到,取数真正触发的时机在渲染函数执行之前,所以在 usePreloadedQuery 调用时取数肯定已经在路上,甚至已经完成。...3 总结 第二天的内容非常全面,涉及了 React API、开发者周边、codemod 工具、代码维护、写作/音乐与代码、动画、函数式编程、看似简单的 React 组件、使用 React 制作的各种脑洞大开的项目

    1.2K10

    探索React Hooks:原来它们是这样诞生的!

    这篇文章《Where Did Hooks Come From?》主要讨论了 React Hooks 的来源背景。...在基于类的组件中,我们会说它在生命周期方法自定义方法中。在功能组件中,它只是 JSX 之上的东西。 在某种程度上,Hooks 的故事与 React 及其先前用于共享代码的 API 的故事密切相关。...因此,当 React 在 2016 年获得真正的类,大多数 React 开发人员为 mixins 的 API 消失而欢呼。...我们应该称之为函数组件,因为...他们有计划 2018 Hooks 从本质上讲,Hooks 只是我们可以从函数组件中调用的函数。...如果你想要一个获取数据的自定义 Hook,推荐来自 React Query 的自定义钩子,名为 useQuery() 。 如今,如果你愿意,你仍然可以使用类。如果你觉得它们更容易使用,那完全取决于你。

    1.5K20

    React Hooks踩坑分享

    本文主要讲以下内容: 函数式组件类组件的不同 React Hooks依赖数组的工作方式 如何在React Hooks中获取数据 一、函数式组件类组件的不同 React Hooks由于是函数式组件...二、React Hooks依赖数组的工作方式 在React Hooks提供的很多API都有遵循依赖数组的工作方式,比如useCallBack、useEffect、useMemo等等。...所以在用这类API我们要特别注意,在依赖数组内一定要填入依赖的props、state等值。...(其实这些归根究底,就是React Hooks会形成闭包) 三、如何在React Hooks中获取数据 在我们用习惯了类组件模式,我们在用React Hooks中获取数据,一般刚开始大家都会这么写吧:...另外一方面,业务一旦变的复杂,在React Hooks中用类组件那种方式获取数据也会有别的问题。 我们做这样一个假设,一个请求入参依赖于两个状态分别是queryid。

    2.9K30

    GraphQL在现代Web应用中的应用与优势

    编写前端组件现在,我们在React组件中使用Apollo Client执行查询变更:// App.jsimport React from 'react';import { gql, useQuery,...同时,我们定义了一个ADD_MESSAGE_MUTATION变更操作,当用户点击按钮,它将向服务器发送一个新消息。4....查询突变根接下来,定义GraphQL的查询根(Query突变根(Mutation)类型,它们是客户端请求数据修改数据的入口点。type Query { user(id: ID!)...: Post}在Query类型中,我们定义了获取单个用户、所有用户、单篇帖子所有帖子的查询。而在Mutation类型中,我们定义了创建新用户新帖子的操作。...减少错误:客户端定义查询结构,服务器返回预期的形状,降低了由于接口不匹配导致的错误。更好的API设计:强类型系统确保了数据的一致性正确性,使得API更加易于理解维护。

    9810

    写在2021: 值得关注学习的前端框架工具库

    GraphiQL,可视化的GraphQL API调试工具,直观的查看你的Schema、发起请求、查看问题,有一个增强版本是支持通过点击单选框生成查询语句,一没找到。...生成GraphQL Schema、API查询语句(Query/Mutation/Subscription都支持,并且是根据你的Schema组合来的)等,可以说是非常猛了。...一体化框架 一体化框架指的是, 你的前后端项目放在同一个repo里(后端是Node),同时前端直接调用在后端定义的方法,由框架在编译去自动的把前端对后端的方法调用转换成HTTP请求。...useMutation抹掉了中间的调用过程(Apollo的hooks类似但不完全相同,Apollo的useQuery接收的是GraphQL Document,BlitzJS中的则接收的是后端方法,其中会直接...应该是三者中最适合国内场景的框架了,Serverless + Vue / React + Hooks,优势也不少:跨前端框架、跨Serverless平台、Hooks代码更好维护与复用、更符合直觉的API

    2.9K10

    写在 2021: 值得关注学习的前端框架工具库

    GraphiQL[45],可视化的GraphQL API调试工具,直观的查看你的Schema、发起请求、查看问题,有一个增强版本是支持通过点击单选框生成查询语句,一没找到。...生成GraphQL Schema、API查询语句(Query/Mutation/Subscription都支持,并且是根据你的Schema组合来的)等,可以说是非常猛了。...一体化框架 一体化框架指的是, 你的前后端项目放在同一个repo里(后端是Node),同时前端直接调用在后端定义的方法,由框架在编译去自动的把前端对后端的方法调用转换成HTTP请求。...useMutation抹掉了中间的调用过程(Apollo的hooks类似但不完全相同,Apollo的useQuery接收的是GraphQL Document,BlitzJS中的则接收的是后端方法,其中会直接...应该是三者中最适合国内场景的框架了,Serverless + Vue / React + Hooks,优势也不少:跨前端框架、跨Serverless平台、Hooks代码更好维护与复用、更符合直觉的API

    4.2K10
    领券