【 React 】在React 项目是如何捕获错误的?

1. 是什么

在react项目中去编写组件内JavaScript代码错误会导致React的内部状态被破坏,导致整个应用崩溃,这是不应该出现的现象
作为一个框架,react也有自身对于错误的处理的解决方案

2. 如何做

为了解决出现的错误导致整个应用崩溃的问题,react16引用了错误边界新的概念
错误边界是一种React组件这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误
形成错误边界组件的两个条件:

  • 使用了static getDerivedStateFromError()
  • 使用了componentDidCatch()

抛出错误后,请使用static getDerivedStateFromError()渲染备用UI,使用componentDidCatch()打印错误信息,如下:

class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false }; }static getDerivedStateFromError(error) {// 更新state使下一次渲染能够显示降级后的UIreturn { hasError: true }; }componentDidCatch(error, errorInfo) {// 你同样可以将错误日志上报给服务器logErrorToMyService(error, errorInfo); }render() {if (this.state.hasError) {// 自定义降级后的UI并渲染 return <h1>Something went wrong.</h1>; }return this.props.children; }}

然后就可以把自身组件的作为错误边界的子组件,如下:

<ErrorBoundary><MyWidget />
</ErrorBoundary>

下面这些情况无法捕获到异常:

  • 事件处理
  • 异步代码
  • 服务端渲染
  • 自身抛出来的错误

在react 16版本之后,会把渲染期间发生的所有错误打印到控制台
对于错误边界无法捕获的异常,如事件处理过程中发生问题并不会捕获到,是因为其不会在渲染期间触发,并不会导致渲染时候问题
这种情况可以使用js的try…catch…语法,如下:

class MyComponent extends React.Component {constructor(props) {super(props);this.state = { error: null };this.handleClick = this.handleClick.bind(this); }handleClick() {try {// 执行操作,如有错误则会抛出} catch (error) {this.setState({ error }); } }render() {if (this.state.error) {return <h1>Caught an error.</h1> }return <button onClick={this.handleClick}>Click Me</button> }
}

除此之外还可以通过监听onerror事件

window.addEventListener('error', function(event) { ... })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/747710.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

升入理解计算机系统学习笔记

磁盘存储 磁盘是广为应用的保存大量数据的存储设备&#xff0c;存储数据的数量级可以达到几百到几千千兆字节&#xff0c;而基于RAM的存储器只能有几百或几千兆字节。不过&#xff0c;从磁盘上读信息的时间为毫秒级&#xff0c;比从DRAM读慢了10万倍&#xff0c;比从SRAM读慢了…

NodeJs利用腾讯云实现手机发送验证码

本文介绍如何在nodejs实现短信发送&#xff0c;以腾讯云的短信验证为例。 腾讯云中准备工作 首先需要腾讯云的个人或者企业认证的账号&#xff0c;个人会赠送一百条&#xff0c;企业赠送一千条&#xff0c;可以用于测试&#xff0c;地址&#xff1a;腾讯云短信服务。然后需要…

latex中参考文献的集中表示方式

LaTeX的参考文献比较麻烦,入手也较慢,一直以来都是运用直接法,特别死板,跟word手打比除了自动排序外没有什么优势。 换成一体机后,借着新装的texworks editor和texstudio,好好的把各种参考文献的使用方法弄明白。 最简单的——直接直接写在文档尾部 直接在把格式排好的参…

Copilot with GPT-4与文心一言4.0:AI技术的未来

Copilot with GPT-4的深度分析 Copilot with GPT-4是基于OpenAI的GPT-4模型&#xff0c;它是一个多功能的AI助手&#xff0c;能够在多种语言中进行交流和创作。GPT-4模型的强大之处在于其庞大的数据训练基础&#xff0c;这使得它在理解语境、生成文本以及执行复杂任务方面表现…

《Ubuntu20.04环境下的ROS进阶学习5》

一、Hector_Mapping构建二维地图 在前面我们已经介绍了如何使用激光雷达来扫描地图&#xff0c;如何用激光雷达来建造地图&#xff0c;本节我们将两者结合起来&#xff0c;通过Hector_Mapping功能包实现SLAM。 二、在仿真环境中进行2D SLAM 1、下载Hector_Mapping sudo apt i…

【论文阅读笔记】Attention Is All You Need

1.论文介绍 Attention Is All You Need 2017年 NIPS transformer 开山之作 回顾一下经典&#xff0c;学不明白了 Paper Code 2. 摘要 显性序列转导模型基于包括编码器和解码器的复杂递归或卷积神经网络。性能最好的模型还通过注意力机制连接编码器和解码器。我们提出了一个新…

【Numpy】练习题100道(26-50题)

#学习笔记# 在学习神经网络的过程中发现对numpy的操作不是非常熟悉&#xff0c;遂找到了Numpy 100题。 Git-hub链接 1.题目列表 26. 下面的脚本输出什么&#xff1f;(★☆☆) print(sum(range(5),-1)) from numpy import * print(sum(range(5),-1)) 27. 考虑一个整数向量…

怎样提升小程序日活?签到抽奖可行吗?

一、 日活运营策略 小程序应该是即用即走的&#xff0c;每个小程序都在用户中有自己的独特定位&#xff0c;可能是生活日常必备&#xff08;美食、团购、商城&#xff09;&#xff0c;也可能是工作办公必备&#xff08;文档、打卡、工具&#xff09;。 如果你想要让自己的小程…

云计算与APP开发,如何利用云端服务提升应用性能?

随着移动应用程序&#xff08;APP&#xff09;的普及&#xff0c;如何提升应用性能成为了开发者们关注的重点之一。而云计算技术的发展为APP开发者提供了全新的解决方案。本文将探讨云计算与APP开发的结合&#xff0c;以及我们公司提出的解决方案&#xff0c;帮助开发者利用云端…

KMP 算法介绍

1. KMP 算法介绍 KMP 算法&#xff1a;全称叫做 「Knuth Morris Pratt 算法」&#xff0c;是由它的三位发明者 Donald Knuth、James H. Morris、 Vaughan Pratt 的名字来命名的。KMP 算法是他们三人在 1977 年联合发表的。 KMP 算法思想&#xff1a;对于给定文本串 T 与模式串 …

使用 ZipArchiveInputStream 读取压缩包内文件总数

读取压缩包内文件总数 简介 ZipArchiveInputStream 是 Apache Commons Compress 库中的一个类&#xff0c;用于读取 ZIP 格式的压缩文件。在处理 ZIP 文件时&#xff0c;编码格式是一个重要的问题&#xff0c;因为它决定了如何解释文件中的字符数据。通常情况下&#xff0c;Z…

获取iOS和Android的app下载渠道和相关参数的方式

1. iOS 1.1 Deep Link 作用&#xff1a;Deep Link 允许应用响应特定的链接&#xff0c;直接打开应用内的某个特定内容或页面。这意味着用户可以通过点击一个链接&#xff0c;直接跳转到应用内部的某个具体位置&#xff0c;而不是每次都从应用的首页开始。配置&#xff1a;开发…

代码随想录刷题笔记 Day 52 | 打家劫舍 No.198 | 打家劫舍 II No.213 | 打家劫舍III No.337

文章目录 Day 5201. 打家劫舍&#xff08;No. 198&#xff09;<1> 题目<2> 笔记<3> 代码 02. 打家劫舍 II&#xff08;No. 213&#xff09;<1> 题目<2> 笔记<3> 代码 03.打家劫舍III&#xff08;No. 337&#xff09;<1> 题目<2&g…

H5/微信 Video标签移动端播放问题

一、禁止/阻止/取消默认的全屏播放 亲测&#xff1a; IOS和安卓均有效 <video x5-playsinline"true"playsinline"true"webkit-playsinline"true"x-webkit-airplay"true"x5-video-orientation"portraint"><source…

工智能的迷惑是技术发展的产物

简述&#xff1a; 随着ChatGPT在全球科技舞台上掀起一股热潮&#xff0c;人工智能再次成为了人们关注的焦点。各大公司纷纷紧跟潮流&#xff0c;推出了自己的AI大模型&#xff0c;如&#xff1a;文心一言、通义千问、讯飞星火、混元助手等等&#xff0c;意图在人工智能领域占据…

sqlplus登录卡死无响应异常处理

一、问题描述 通过Sqlplus 访问数据hang死在登录界面&#xff0c;且不能通过CtrlC取消&#xff0c;如下所示&#xff1a; [oracletest01 ~]$ sqlplus / as sysdbaSQL*Plus: Release 19.0.0.0.0 - Production on Fri Mar 13 10:41:36 2024 Version 19.3.0.0.0Copyright (c) 198…

Vue多文件学习项目综合案例——购物车,黑马vue教程

一、项目截图 二、主要知识点 vuex的使用json-server的使用json-server --watch index.json三、需要注意的点 json-server 安装成功&#xff0c;查看版本直接报错。安装默认版本埋下的一个坑&#xff0c;和node版本不匹配作者直接安装vuex&#xff0c;默认安装也是版本不匹配…

C语言案例01, 输入两个整数,获得两个数加减乘除的值,持续更新中~

一.题目 /* 输入两个整数,获得两个数加减乘除的值 */ *///头文件 #include <stdio.h>//主方法 int main() {//声明两个int类型的变量int a;int b;//提示用用户输入printf("请输入两个整数!\n");//用scanf 获取a和b在内存中的值scanf("%d%d",&a…

ai智能外呼机器人的功能,机器人对话常用语模板搭建

智能外呼机器人就是用来往外呼出打电话的;经常看到有文章说电话机器人将要代替传统人工话务员、电话销售员要失业了、外呼机器人要颠覆电销革命了等等&#xff0c;我想说的是&#xff0c;目前市场上的电话机器人还远远不能达到&#xff0c;未来几年内也不一定会实现。 下面就简…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Panel)

可滑动面板&#xff0c;提供一种轻量的内容展示窗口&#xff0c;方便在不同尺寸中切换。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 说明&#xff1a; 子组件类型&a…