React查询-无法通过'getQueryData‘访问数据，始终返回undefined - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

在后台更新“过期”数据知道数据何时“过期” 尽快反映数据更新性能优化，如分页和延迟加载数据管理内存和服务器状态的垃圾收集使用结构共享记忆查询结果直到React-Query的出现，上面的问题都变得迎刃而解...除此之外，使用useQuery拉取回来的数据，会被默认缓存起来，然后可以通过配置过期时间，重新拉取等策略来进行管理。...以上面Example组件为例，如果我们想在另一个组件访问这些数据。...，以及上下页的逻辑，然后会返回更新页面数据的状态，以及触发更新的方法。...undefined, }, ) devTools配套开发工具导入开发工具 import { ReactQueryDevtools } from 'react-query/devtools'

2K3 0

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

前言在项目中，通常都需要跟服务端进行异步的数据交互，基本都是用到axios这个库来做请求，嗯，毕竟拥有80k star,明星项目接下来，我们来回顾下axios在项目中的使用以查询用户信息为例，我们会这样封装...解决了什么问题服务端状态有以下特点：存储在远端，本地无法直接控制需要异步 API 来查询和更新可能在不知情的情况下，被另一个请求方更改了数据，导致数据不同步现有的状态管理库（如 Mobx、Redux...而 React Query 就是为了解决服务端状态带来的上述问题而出现的，除此之外它还带来了以下特性：更方便地控制缓存把对于相同数据的多个请求简化成一个在后台更新过期数据知道数据什么时候会「过期...」对于数据的变化尽可能快得做出响应分页查询和懒加载等请求性能优化管理服务器状态的内存和垃圾回收通过结构共享（structural sharing）来缓存查询结果请求中间态处理 function...会在全局维护一个服务端状态树，根据 Query key 去查找状态树中是否有可用的数据，如果有则直接返回，否则则会发起请求，并将请求结果以 Query key 为主键存储到状态树中。

3.1K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

大厂都在用 @tanstackreact-query 到底有多好用！

更多精彩文章欢迎关注我的公众号正文 @tanstack/react-query 是 TanStack 生态的一部分，专为 React、Vue 等框架设计，用于管理服务器状态和异步数据。...await queryClient.cancelQueries({ queryKey: ["todos"] }); const previousTodos = queryClient.getQueryData...(previousTodos || []), { id: Date.now(), text }]); return { previousTodos }; // 返回上下文，用于失败回滚...并行查询时只需要写多个 useQuery 即可， const userQuery = useQuery({ queryKey: ["user", userId], queryFn: () =>...解决了数据管理的痛点，通过 useQuery 和 useMutation 等钩子，让代码更简洁、更可靠。

7021 0

教你如何在 React 中逃离闭包陷阱 ...

你无法访问它的内部结构，所以也没办法解决它的性能问题。但你确实需要在表单中使用它，因此你决定用 React.memo 封装它，以便在表单中的状态发生变化时尽量减少它的重新渲染。...有些文章会建议通过这样做来 memoize 组件上的 props。从表面上看，它确实看起来更简单：只需将一个函数传递给 useRef 并通过 ref.current 访问它，没有依赖性，不用担心。...比较函数始终返回 true，HeavyComponent 永远不会更新，因此，它保存的是对第一个 onClick 闭包的引用，并具有冻结的 undefined 值。...，每次重新渲染时都需要重新创建函数，这是无法避免的，这也是闭包的本质，与 React 无关。...在 React 中，我们可以利用 Ref 是一个可变对象这一特性，从而摆脱 "过期闭包" 的问题。我们可以在过期闭包之外更改 ref.current，然后在闭包之内访问它，就可以获取最新的数据。

2.5K4 0

VS Code 调试完全攻略（3）：编辑变量并重新执行函数

本文） launch.json 和调试控制台基于浏览器的 React 应用调试用 TypeScript 开发并打包的 React ?...代码 Hello, undefined! 我们的玩具服务器的请求中始终存在一个名为 name 的查询参数。如果没有参数，响应将会变为 “Hello, undefined!”...： > curl http://127.0.0.1:3456 Hello, undefined! 让我们通过调试器看看 getGreeting 函数在不同 name 参数下的表现如何。...在第 15 行上放置一个断点，然后在没有查询参数 name 的情况下访问服务器（例如，curl http://127.0.0.1:3456）。你应该看到调试器启动后停在第 15行。 ?...undefined 然后跳过下一行（F10）并观察 getGreeting 的返回值： ?

4.4K2 0

性能：React 实战优化技巧之函数闭包

示例：点击子组件中按钮，获取 input 数据进行提交（常见于表单） index.tsx import Author from '....* 如果旧的和新的 props 相等，即组件使用新的 props 渲染的输出和表现与旧的 props 完全相同，则它应该返回 true。否则返回 false。...原理分析：为什么没有闭包问题为了让函数能够访问最新状态，每次重新渲染时都需要重新创建函数，这是无法避免的，这也是闭包的本质，与 React 无关；利用 Ref 是一个可变对象这一特性，从而摆脱 “过期闭包...我们可以在过期闭包之外更改 ref.current，然后在闭包之内访问它，就可以获取最新的数据。通过 useRef 和 useEffect 动态更新引用的函数，避免了闭包问题。...consoleValue 函数虽然在整个组件生命周期中保持不变，但它通过调用 ref.current 来间接访问最新的 val 值。

3311 0

美丽的公主和它的27个React 自定义 Hook

这意味着一个函数对于相同的输入始终返回相同的输出。 ❞ 如果我们从函数组件中移除有状态和副作用逻辑，我们就得到了一个无状态组件。此外，有状态和副作用逻辑可以在应用程序的其他地方进行重复使用。...只需将所需的媒体查询作为参数传递，该钩子将返回一个布尔值，指示媒体查询是否与当前视口大小匹配。使用该自定义钩子可以轻松地在整个应用程序中实现响应式行为。...通过使用 useRef 来存储回调引用，该钩子保证始终调用最新版本的函数。此外，useTimeout钩子通过使用 useCallback 来记忆 set 和 clear 函数，优化了性能。...使用场景我们将能够访问当前语言、设置语言、回退语言以及设置回退语言的功能。此外，该钩子还提供了一个便捷的翻译函数 t，它以key作为输入并返回相应的翻译值。...通过在当前依赖项和先前依赖项之间执行深层比较，该钩子智能地确定是否应触发效果，从而在浅层比较无法胜任的情况下实现了性能优化。

3.4K2 0

有哪些前端面试题是面试官必考的_2023-03-01

迭代器的遍历方法是首先获得一个迭代器的指针，初始时该指针指向第一条数据之前，接着通过调用 next 方法，改变指针的指向，让其指向下一条数据每一次的 next 都会返回一个对象，该对象有两个属性 value...，yield 永远返回 undefined。...作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。...null和undefined区别首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。...我们可以通过一些方法获得安全的 undefined 值，比如说 void 0。当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。

2.1K0 0

Reac19 升级指南

19 开始，现在可以将ref作为函数组件的 prop 访问如果直接访问 element.ref会出现警告 function MyInput({placeholder, ref}) { return...}} /> 原始代码返回HTMLDivElement的实例，TypeScript 无法确定是否清理函数。...useRef需要传递参数通过更改类型使得 useRef 现在需要接收一个参数。这显著简化了它的类型签名。...为了简化由于 useRef 所需参数的迁移，添加了一个方便的重载 useRef(undefined)，它自动返回 RefObjectundefined>。...- useReducerReact.Reducer>(reducer) + useReducer(reducer) 这可能在边缘情况下无法正常工作，例如可以通过在元组中传递

1.6K1 0

Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块

首先我们还是逃不开我们的 http 这个 hook 所有的异步请求都是通过这里来发送的我们先返回我们的 fetch 方法封装的 client 函数，最后返回一个 useMutation 函数调用的返回值...num)} {...restProps} /> } 由于我们新封装的 Pin 组件也需要拥有 Rate 组件的属性，因此我们采用了一个继承的操作，我们可以通过 React.ComponentProps...== target.id) || []) 这段代码它其实就只是传入了我们删除项目的数据，然后通过 filter 整理了一下数据传递给了 useConfig ，因此，这几个都是类似的只是传递的参数不一样...useConfig 接收 2 个参数，一个是 queryKey ，一个是新值旧值的函数因此我们通过 filter 从旧数据中过滤掉被删除的项目，这样返回的数据就是我们所要的新数据了 export const...[...old, target] : []) 同理这两个 hook 也这么写，通过数组的方法筛选出新的数据即可这样我们的乐观更新的逻辑就完成了！

1.5K3 0

ECMAScript 2020新特性

另外，大于或等于2的1024次方的数值，JS 无法表示，会返回 Infinity。 BigInt 即解决了这两个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。...在 Web 中，可以通过 window、self 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法获取，必须使用 global。...当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。...tortoise; JS在尝试访问 info.animal.reptile 之前，会隐式检查并确定 info.animal 的值不是 null 或 undefined，如果其值是 null 或 undefined...，那么表达式短路计算直接返回 undefined。

1.1K5 1

每日两题 T16

LFU缓存[1] 描述设计并实现最不经常使用（LFU）缓存的数据结构。它应该支持以下操作：get 和 put。 get(key) - 如果键存在于缓存中，则获取键的值（总是正数），否则返回 -1。...3 cache.get(4); // 返回 4 分析我们先回顾一下常用的缓存算法 LRU (Least recently used) 最近最少使用，如果数据最近被访问过，那么将来被访问的几率也更高...，当在箭头函数中调用 aruguments 时同样会向作用域链中查询结果；3.不绑定 super 和 new.target；4.没有 prototype 属性，即指向 undefined；5.无法使用...new 实例化对象，因为普通构造函数通过 new 实例化对象时 this 指向实例对象，而箭头函数没有 this 值，同时箭头函数也没有 prototype。...另外提一点，在使用 React 、Vue相关框架时，要注意，生命周期函数使用箭头函数会带来一些问题。 References [1] 460.

4862 0

这样回答前端面试题才能拿到offer2

（1）在区域传输的时候使用TCP协议辅域名服务器会定时（一般3小时）向主域名服务器进行查询以便了解数据是否有变动。如有变动，会执行一次区域传送，进行数据同步。...；让实例可以访问构造函数原型（constructor.prototype）所在原型链上的属性；构造函数返回的最后结果是引用数据类型。...作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。...严格地说，http 协议无法做到服务器主动推送信息。但是，有一种变通方法，就是服务器向客户端声明，接下来要发送的是流信息。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。...答：可通过闭包+局部变量来完成在构造函数内部声明局部变量和普通方法因为作用域的关系只有构造函数内的方法才能访问局部变量而方法对于外界是开放的因此可以通过方法来访问原本外界访问不到的局部变量达到函数封装的目的

6824 0

（Vue 小程序 css ES6 React 校招大厂真题、高级前端进阶等）

数据双向绑定原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的....11.vue中数据变了但是视图不跟新怎么解决？原因: 1.数组数据变动：使用某些方法操作数组，变动数据时，有些方法无法被vue监测。 2.Vue 不能检测到对象属性的添加或删除。...函数组件: 函数组件接收一个单一的 props 对象并返回了一个React元素函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。...由于 props 是传入的，并且它们不能更改，因此我们可以将任何仅使用 props 的 React 组件视为 pureComponent，也就是说，在相同的输入下，它将始终呈现相同的输出。...判断数据类型有几种方法 5. 闭包闭包指有权访问另一个函数作用域中变量的函数。

1.4K1 0

为什么React开发者集体掉进了状态管理的陷阱

大多数React开发者会用useState来存放API数据，这就是问题的根源。...：用户访问过某个列表后离开再回来，你得自己决定是重新请求还是用之前的数据缓存过期判断：什么时候算数据"太旧了"需要重新获取？...gcTime: 10 * 60 * 1000, // 「生存期」：未使用的数据10分钟后从内存删除 } 这两个概念经常被混淆： staleTime：从查询执行完毕开始计时，在这个时间内如果再次请求同一数据...，直接返回缓存，不发网络请求。...（比如删除了一个商品），才主动标记相关查询为过期。

2361 0

前端面试题(附答案)持续更新中

作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数。作用域链的本质上是一个指向变量对象的指针列表。...作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。当查找一个变量时，如果当前执行环境中没有找到，可以沿着作用域链向后查找。...（1）在区域传输的时候使用TCP协议辅域名服务器会定时（一般3小时）向主域名服务器进行查询以便了解数据是否有变动。如有变动，会执行一次区域传送，进行数据同步。...（2）在域名解析的时候使用UDP协议客户端向DNS服务器查询域名，一般返回的内容都不超过512字节，用UDP传输即可。不用经过三次握手，这样DNS服务器负载更低，响应更快。...持久型也就是攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。

7911 0

JavaScrip最容易犯的十大错误及其避免方法（）

我们将选择React，但不正确初始化的相同原则也适用于Angular，Vue或任何其他框架。...这是一种浏览器安全措施，旨在防止跨域传递数据，否则将无法进行通信。...因此，使用JS命名空间时最安全的选择是始终使用实际命名空间作为前缀。 Rollbar.isAwesome(); 6....让我们通过以下示例理解此错误。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义的变量时，它总是返回undefined，我们无法获取或设置undefined的任何属性。

7.3K1 0

TS 常见问题整理（60多个，持续更新ing）

拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。 4....undefined : a.b; // 如果 a 是 null/undefined，那么返回 undefined，否则返回 a.b 的值. a?.[x]; // 相当于 a == null ?...undefined : a[x]; // 如果 a 是 null/undefined，那么返回 undefined，否则返回 a[x] 的值 a?.b(); // 相当于a == null ?...空值合并运算符：只有左侧表达式结果为 `null` 或 `undefined` 时，才会返回右侧表达式的结果。通过这种方式可以明确地区分 `undefined、null` 与 `false` 的值。...有时候我们需要复用一个类型，但是又不需要此类型内的全部属性，因此需要剔除某些属性这个方法在 React 中经常用到，当父组件通过 props 向下传递数据的时候，通常需要复用父组件的 props 类型

16.3K7 7

9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

(a) //undefined console.log(window.a)//undefined ------------------- var...这段代码，变量a根本就没有定义，但是根本没有报错，这种场景可以在项目中可能是右查询没有查询到，然后输出undefined....可是如果是在使用这个变量去做某些事情例如：这个a变量是一个用户很核心的数据，但是它是undefined。...然后又经过若干的类型转换，被js转换成不知道是什么的数据展示给了客户，那么炸了，可能会引起整个项目出现致命性错误直接奔溃 4....函数的返回值类型是通过其返回值推断出来的（此例是 false和true）。如果让这个函数返回数字或字符串，类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

9432 0

React学习记录

4、“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。...6、尽管 this.props 和 this.state 是 React 本身设置的，且都拥有特殊的含义，但是其实你可以向 class 中随意添加不参与数据流（比如计时器 ID）的额外字段。...例如，此代码可能会无法更新计数器： // Wrong this.setState({ counter: this.state.counter + this.props.increment, });... Activate Lasers 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为...如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。

1.8K2 0

点击加载更多

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

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

大厂都在用 @tanstackreact-query 到底有多好用！

教你如何在 React 中逃离闭包陷阱 ...

VS Code 调试完全攻略（3）：编辑变量并重新执行函数

性能：React 实战优化技巧之函数闭包

美丽的公主和它的27个React 自定义 Hook

有哪些前端面试题是面试官必考的_2023-03-01

Reac19 升级指南

Hooks + TS 搭建一个任务管理系统（三）-- 项目列表功能模块

ECMAScript 2020新特性

每日两题 T16

这样回答前端面试题才能拿到offer2

（Vue 小程序 css ES6 React 校招大厂真题、高级前端进阶等）

为什么React开发者集体掉进了状态管理的陷阱

前端面试题(附答案)持续更新中

JavaScrip最容易犯的十大错误及其避免方法（）

TS 常见问题整理（60多个，持续更新ing）

9102年，隔壁公司新来的女实习生问我什么是TypeScript ？

React学习记录

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐