正文从这开始~

总览

为了解决"Warning: Can't perform a React state update on an unmounted component" ,可以在你的useEffect钩子中声明一个isMounted布尔值,用来跟踪组件是否被安装。一个组件的状态只有在该组件被挂载时才会被更新。

import {useState, useEffect} from 'react';

const App = () => {
const [state, setState] = useState(''); useEffect(() => {
// ️ set isMounted to true
let isMounted = true; async function fetchData() {
const result = await Promise.resolve(['hello', 'world']); // ️ only update state if component is mounted
if (isMounted) {
setState(result);
}
} fetchData(); return () => {
// ️ when component unmounts, set isMounted to false
isMounted = false;
};
}, []); return (
<div>
<h2>State: {JSON.stringify(state)}</h2>
</div>
);
}; export default App;

当我们试图更新一个未挂载的组件的状态时,会出现"无法在未挂载的组件上执行React状态更新"的警告。

isMounted

摆脱该警告的直截了当的方式是,在useEffect钩子中使用isMounted布尔值来跟踪组件是否被挂载。

useEffect中,我们初始化isMounted布尔值为true

我们的fetchData 函数执行一些异步的任务,最常见的是一个API请求,并根据响应来更新状态。

然而,需要注意的是,我们只有当isMounted变量被设置为true时,才会更新状态。

async function fetchData() {
const result = await Promise.resolve(['hello', 'world']); // ️ only update state if component is mounted
if (isMounted) {
setState(result);
}
}

这可以帮助我们避免警告,因为如果组件没有挂载,我们就不会更新状态。

当组件卸载时,从useEffect钩子返回的函数会被调用。

return () => {
// ️ when component unmounts, set isMounted to false
isMounted = false;
};

我们设置isMounted变量为false,表示该组件不再挂载。如果fetchData函数在组件卸载时被调用,if代码块不会执行是因为isMounted设置为false

async function fetchData() {
const result = await Promise.resolve(['hello', 'world']); // ️ only update state if component is mounted
if (isMounted) {
setState(result);
}
}

提取

如果经常这样做,可以将逻辑提取到可重用的钩子中。

import {useState, useEffect, useRef} from 'react';

// ️ extract logic into reusable hook
function useIsMounted() {
const isMounted = useRef(false); useEffect(() => {
isMounted.current = true; return () => {
isMounted.current = false;
};
}); return isMounted;
} const App = () => {
const [state, setState] = useState(''); // ️ use hook
const isMountedRef = useIsMounted(); useEffect(() => {
async function fetchData() {
const result = await Promise.resolve(['hello', 'world']); // ️ only update state if component is mounted
if (isMountedRef.current) {
setState(result);
}
} fetchData();
}, [isMountedRef]); return (
<div>
<h2>State: {JSON.stringify(state)}</h2>
</div>
);
}; export default App;

useRef()钩子可以传递一个初始值作为参数。该钩子返回一个可变的ref对象,其.current属性被初始化为传递的参数。

我们在useIsMounted钩子中跟踪组件是否被挂载,就像我们直接在组件的useEffect钩子中做的那样。

需要注意的是,在fetchData函数中,我们必须检查isMountedRef.current 的值,因为ref上的current属性是ref的实际值。

React报错之无法在未挂载的组件上执行React状态更新的更多相关文章

  1. VM中装Linux换ISO文件报错"该光盘无法被挂载"

    一.发现问题 利用VM安装Red Hat Linux的时候,第一个iso安装完毕,准备换第二个iso,报错“该光盘无法被挂载”. 二.解决办法 上面的菜单栏中“虚拟机”—>“设置”—>“硬 ...

  2. Oracle添加记录的时候报错:违反完整性约束,未找到父项关键字

    今天需要向一个没有接触过的一个Oracle数据库中添加一条记录,执行报错: 分析: 报错的根本原因:未找到父项关键字的原因是因为你在保存对象的时候缺失关联对象. 问题的解决思路:先保存关联对象后再保存 ...

  3. react 报错的堆栈处理

    react报错 Warning: You cannot PUSH the same path using hash history 在Link上使用replace 原文地址https://reactt ...

  4. [转]ORACLE 11G 导出报错(EXP-00003)未找到段 (0,0) 的存储定义

    http://blog.csdn.net/qq_19524879/article/details/51313205 ORACLE 11G 导出报错(EXP-00003)未找到段 (0,0) 的存储定义 ...

  5. 解决Oracle+Mybatis批量插入报错:SQL 命令未正确结束

    Mybatis批量插入需要foreach元素.foreach元素有以下主要属性: (1)item:集合中每一个元素进行迭代时的别名. (2)index:指定一个名字,用于表示在迭代过程中,每次迭代到的 ...

  6. 报错:该字符串未被识别为有效的DateTime

    报错:该字符串未被识别为有效的DateTime □ 背景 前端的搜索条件中包含关于时间的字符串,由jquery ui的datepicker产生时间字符串. 服务端对时间做了一次转换:DateTime. ...

  7. 小程序报错:出现脚本错误或者未正确调用 Page()的解决办法

    场景是两个人共同开发小程序,我使用的是pc端,另一个同事是用的mac端,我这边能够正常运行项目,代码提交到git,同事check下来发现运行报错: 出现脚本错误或者未正确调用 Page(); 如图 一 ...

  8. React报错之Cannot find namespace context

    正文从这开始~ 总览 在React中,为了解决"Cannot find namespace context"错误,在你使用JSX的文件中使用.tsx扩展名,在你的tsconfig. ...

  9. angularjs 遇见$scope,xxx=function()报错为该函数未定义

    本包子今天遇见一个问题,就是明明写了$scope,xx=function()但是报错了,报错显示是该函数未定义,我就很着急的先将函数写成一个全局函数,就没问题,等下午有空的时候寻思了一下,为什么全局就 ...

随机推荐

  1. GIT速查手册

    一.GIT 1.1 简单配置 git是版本控制系统,与svn不同的是git是分布式,svn是集中式 配置文件位置 # 配置文件 .git/config 当前仓库的配置文件 ~/.gitconfig 全 ...

  2. Java高并发-概念

    一.为什么需要并行 业务要求 http处理多个客户端请求 java虚拟机启动多个线程 进程开销比线程大的多 性能 多线程在多核系统比单线程要好的多 摩尔定律失效 二.几个重要概念 2.1 同步和异步 ...

  3. MySQL(10) - Python与MySQL的交互

    1.MySQL驱动模块Connector的语法 1.1.下载驱动 进入官网下载对应版本驱动 1.2.创建连接 方式一: import mysql.connector con = mysql.conne ...

  4. python之名称空间与函数对象

    目录 名称空间 内置名称空间 全局名称空间 局部名称空间 名称的查找顺序 作用域 global关键字 nonlocal关键字 函数名的多种用法 函数的嵌套 名称空间 名称空间就是变量名与变量值绑定关系 ...

  5. Win10系统下怎么让局域网内其他电脑通过IP访问网站

    最近,有位win10系统用户在电脑上制作好网站后,希望能让局域网内的其他电脑通过IP直接访问自己电脑的网站,以便得到更好地测试效果.可是,该用户操作了很久都没成功.那么,我们如何配置win10电脑的I ...

  6. 带你学习MindSpore中算子使用方法

    摘要:本文分享下MindSpore中算子的使用和遇到问题时的解决方法. 本文分享自华为云社区<[MindSpore易点通]算子使用问题与解决方法>,作者:chengxiaoli. 简介 算 ...

  7. 彰显个性│github和gitlab之自定义首页样式

    目录 一.个性首页 二.制作步骤 三.修改内容 一.个性首页 相信很多小伙伴在逛 github 和 gitlab 的时候 会发现很多开发者的首页异常的炫酷,如 https://github.com/c ...

  8. NB-IoT无线通信模块与Lora无线通信协议技术分析与前景展望

    物联网的快速发展对无线通信技术提出了更高的要求,专为低带宽.低功耗.远距离.大量连接的物联网应用而设计的LPWAN(low-power Wide-Area Network,低功耗广域网)也快速兴起.物 ...

  9. 一次 MySQL 误操作导致的事故,「高可用」都顶不住了!

    这是悟空的第 152 篇原创文章 官网:www.passjava.cn 你好,我是悟空. 上次我们项目不是把 MySQL 高可用部署好了么,MySQL 双主模式 + Keepalived,来保证高可用 ...

  10. [零基础学IoT Pwn] 复现Netgear WNAP320 RCE

    [零基础学IoT Pwn] 复现Netgear WNAP320 RCE 0x00 前言: 这是[零基础学IoT Pwn]的第二篇,上篇我们搭好了仿真环境后,模拟运行了Netgear WNAP320固件 ...