首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何与useEffect/setState挂钩

如何与useEffect/setState挂钩
EN

Stack Overflow用户
提问于 2019-07-12 15:44:52
回答 1查看 444关注 0票数 1

我在通过以下测试时遇到了问题:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { useEffect, useState } from "react";

export function useComponentResources(required) {
  const [componentResources, setComponentResources] = useState(null);

  useEffect(() => {
    if (required) {
      // api call
      setTimeout(() => setComponentResources({}), 100);
    }
  }, [required]);

  return componentResources;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { renderHook } from "@testing-library/react-hooks";
import { useComponentResources } from "./component-resources.hook";

describe("component-resources.hook", () => {
  it("fetches resources when required", () => {
    //act
    const { result } = renderHook(() => useComponentResources(true));

    //assert
    expect(result.current).toEqual({});
  });
});

它总是失败:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
expect(received).toEqual(expected)

Expected value to equal:
  {}
Received:
  null

Difference:

  Comparing two different types of values. Expected object but received null.

   7 |     const { result } = renderHook(() => useComponentResources(true));
   9 |     //assert
> 10 |     expect(result.current).toEqual({});
  11 |   });
  12 | });

我已经在codesandbox中创建了一个再现案例:

https://codesandbox.io/embed/priceless-browser-94ec2

EN

回答 1

Stack Overflow用户

发布于 2019-07-12 18:00:40

renderHook不会等待你的setTimeout触发;它不会知道你的组件有什么“副作用”。因此,当您的expect()运行时,当前值仍然是它的默认值- null

我们可以通过使用renderHook返回的对象上的waitForNextUpdate来强制测试等待,直到钩子再次更新。waitForNextUpdate是一个返回promise的函数,一旦钩子再次更新(例如,当您的setTimeout被触发时),promise就会解析。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { renderHook } from "@testing-library/react-hooks";
import { useComponentResources } from "./component-resources.hook";

describe("component-resources.hook", () => {
  it("fetches resources when required", async () => {
    const { result, waitForNextUpdate } = renderHook(() => useComponentResources(true));

    await waitForNextUpdate();

    expect(result.current).toEqual({});
  });
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57010192

复制
相关文章
useEffect与useLayoutEffect
useEffect与useLayoutEffect可以统称为Effect Hook,Effect Hook可以在函数组件中执行副作用操作,副作用是指函数或者表达式的行为依赖于外部环境,或者在这里可以理解为修改了某状态会对其他的状态造成影响,这个影响就是副作用,数据获取,设置订阅以及手动更改React组件中的DOM都属于副作用。
WindRunnerMax
2022/05/06
1.2K0
useTypescript-React Hooks和TypeScript完全指南
React v16.8 引入了 Hooks,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用,从而易于共享逻辑。Hook 令人兴奋并迅速被采用,React 团队甚至想象它们最终将替换类组件。
前端森林
2020/04/23
8.5K0
useTypescript-React Hooks和TypeScript完全指南
手写useState与useEffect
useState与useEffect是驱动React hooks运行的基础,useState用于管理状态,useEffect用以处理副作用,通过手写简单的useState与useEffect来理解其运行原理。
WindRunnerMax
2022/05/06
2K0
从useEffect看React、Vue设计理念的不同
我们知道,React发布Hooks后,带来了业界一波Hooks热。很多框架(比如Vue Composition API、Solid.js)都借鉴了Hooks的模式。
公众号@魔术师卡颂
2022/11/22
1.9K0
从useEffect看React、Vue设计理念的不同
BattlEye通讯挂钩
为了与广大视频游戏黑客作斗争,反作弊系统需要从客户那里收集和处理大量信息。通常,这通常是通过将所有内容发送到服务器进行进一步分析来完成的,这使攻击者可以通过有趣的方式规避这些系统,其中之一是劫持了通信例程。
franket
2021/02/09
3.9K0
React Hook技术实战篇
Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型setState的功能, Effect Hook提供处理副作用的函数(数据订阅, 更新dom等), 也能够自定义Hook Api, 使得开发起来具有灵活性, 更多Api可以点击详情
JianLiang
2019/06/04
4.3K0
[- Flutter 数据&状态篇 -] setState
0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改,易复用 0.2:要说的话 注意:本篇是对状态
张风捷特烈
2020/04/30
1.4K0
[- Flutter 数据&状态篇 -] setState
[- Flutter 数据&amp;状态篇 -] setState
上篇: 又不是不能用-篇 本文源码Github 0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改,易复用 ---- 0.2:要说的话 注意:本篇是对状态最基本的使用。虽然比较糙,但是并不代表不重要 后面两篇是基于此篇的优化,所以这篇一定要看懂,才能跟上我的思维。 效果如下,单从界面上来看,我还是比较满意的。 ---- 0.3: 简介一下 本项目主要包括以下几点: 1. 输入一个待办事
张风捷特烈
2022/09/20
9510
[- Flutter 数据&amp;状态篇 -] setState
[- Flutter 数据&状态篇 -] setState
上篇: 又不是不能用-篇 本文源码Github 0.1:对我而言,一个产品有四层境界 1.造都造不出来 2.它又不是不能用 <---- 3.用的时候大家都不说话 4.如丝般顺滑,易拓展,易修改
张风捷特烈
2020/10/16
9600
[- Flutter 数据&状态篇 -] setState
4.5 MinHook 挂钩技术
MinHook是一个轻量级的Hooking库,可以在运行时劫持函数调用。它支持钩子API函数和普通函数,并且可以运行在32位和64位Windows操作系统上。其特点包括易于使用、高性能和低内存占用。MinHook使用纯汇编语言实现,在安装和卸载钩子时只需要短暂地锁定目标线程,因此对目标线程的影响非常小。
微软技术分享
2023/10/11
3490
4.5 MinHook 挂钩技术
绕过 EDR 挂钩
通过修补 NT API 存根并在运行时解析 SSN 和系统调用指令来绕过 EDR 挂钩
Khan安全团队
2023/02/23
6130
绕过 EDR 挂钩
如何编写难以维护的React代码?——滥用useEffect
在许多项目中,我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子,特别是在处理衍生状态时。让我们来看一个例子:
zhaokang555
2023/10/17
1670
react hook useEffect 依赖传入后如何执行?
闭包陷阱产生的原因就是 useEffect 等 hook 里用到了某个 state,但是没有加到 deps 数组里,这样导致 state 变了却没有执行新传入的函数,依然引用的之前的 state。
蓓蕾心晴
2022/09/30
4950
驱动开发:内核实现SSDT挂钩与摘钩
在前面的文章《驱动开发:内核解析PE结构导出表》中我们封装了两个函数KernelMapFile()函数可用来读取内核文件,GetAddressFromFunction()函数可用来在导出表中寻找指定函数的导出地址,本章将以此为基础实现对特定SSDT函数的Hook挂钩操作,与《驱动开发:内核层InlineHook挂钩函数》所使用的挂钩技术基本一致,不同点是前者使用了CR3的方式改写内存,而今天所讲的是通过MDL映射实现,此外前者挂钩中所取到的地址是通过GetProcessAddress()取到的动态地址,而今天所使用的方式是通过读取导出表寻找。
微软技术分享
2023/06/05
3060
驱动开发:内核实现SSDT挂钩与摘钩
setState 源码浅析
新的状态是立即更新还是后面render更新(这个例子是在batchedUpdate中更新的情况)
IMWeb前端团队
2019/12/04
4200
setState 源码浅析
4.5 MinHook 挂钩技术
MinHook是一个轻量级的Hooking库,可以在运行时劫持函数调用。它支持钩子API函数和普通函数,并且可以运行在32位和64位Windows操作系统上。其特点包括易于使用、高性能和低内存占用。MinHook使用纯汇编语言实现,在安装和卸载钩子时只需要短暂地锁定目标线程,因此对目标线程的影响非常小。
微软技术分享
2023/09/18
5390
4.5 MinHook 挂钩技术
setState流程
setState() 将对组件 state 的更改排入队列批量推迟更新,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步,只是代码执行顺序不同,有了异步的感觉。
flyzz177
2022/12/06
6270
早读《A Complete Guide to useEffect》
https://overreacted.io/a-complete-guide-to-useeffect/
icepy
2019/12/18
7710
react hooks 全攻略
React Hooks 是 React 提供的一种功能,允许我们在函数组件中使用状态和其他 React 特性。使用 Hooks 可以简化函数组件中的状态管理和副作用处理。
程序员王天
2023/10/18
4490
换个角度思考 React Hooks
从 Vue 迁移到 React ,不太习惯 React Hooks 的使用?也许换个角度思考 Hooks 出现的意义会对你有所帮助。 1 什么是 Hooks 简而言之, Hooks 是个函数,通过使用 Hooks 可以让函数组件功能更加丰富。 在某些场景下,使用 Hooks 是一个比使用类组件更好的主意。 1.1 Hooks 出现的背景 在 Hooks 出现之前,函数组件对比类组件(class)形式有很多局限,例如: 不能使用 state、ref 等属性,只能通过函数传参的方式使用 props 没有生命周
用户1097444
2022/06/29
4.8K0
换个角度思考 React Hooks

相似问题

React setState挂钩不能与useEffect一起使用

316

如何干净地将setState回调转换为useEffect挂钩?

25

与React本机useEffect()挂钩相关

10

如何正确使用setInterval与反应useEffect挂钩?

11

React useeffect挂钩

226
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文