在React函数组件中使用错误边界和errorElement进行错误处理

在这里插入图片描述

在React 18中,函数组件可以使用两种方式来处理错误:

  1. 使用 ErrorBoundary

ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。

在函数组件中使用 ErrorBoundary,需要先创建一个基于类的 ErrorBoundary 组件,然后将函数组件包裹在其中:

import React from 'react';class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染能够显示降级 UIreturn { hasError: true };}componentDidCatch(error, errorInfo) {// 你同样可以将错误记录到一个错误报告服务器console.log(error, errorInfo);}render() {if (this.state.hasError) {// 你可以自定义降级后的 UI 并渲染return <h1>Something went wrong.</h1>;}return this.props.children; }
}function MyFunctionComponent() {// ...
}// 使用 ErrorBoundary 包裹函数组件
const WrappedComponent = () => (<ErrorBoundary><MyFunctionComponent /></ErrorBoundary>
);
  1. 使用 errorElement 属性 (React 18)

在 React 18 中,你可以在根组件上使用 errorElement 属性来指定发生错误时要渲染的 UI。这个属性可以直接在函数组件上使用:

import React from 'react';function ErrorUI() {return <h1>Something went wrong.</h1>;
}function MyFunctionComponent() {// ...return (<>{/* 组件树 */}{errorElement && <ErrorUI />}</>);
}// 在根组件上使用 errorElement
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><MyFunctionComponent errorElement={<ErrorUI />} /></React.StrictMode>
);

在上面的示例中,如果在 MyFunctionComponent 组件树中发生错误,React 会自动卸载组件树,并替换为传递给 errorElement 属性的 UI。

注意,errorElement 只适用于根组件。如果需要为嵌套的组件树提供错误边界,你仍然需要使用 ErrorBoundary 组件。

总的来说,ErrorBoundary 是一种更通用的错误处理方式,可用于任何组件及其子组件树。而 errorElement 提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。

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

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

相关文章

三高架构是什么

三高架构&#xff0c;也称为三高模型&#xff0c;是指高并发、高可用、高性能的系统架构模型。它是在互联网时代应运而生的一种新型的软件架构&#xff0c;主要用于解决互联网系统架构中需要面对的关键问题。 高并发&#xff1a;指系统能够处理大量并发请求的能力。在高并发场…

课时105:正则表达式_进阶知识_扩展符号

1.1.1 扩展符号 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 简介 字母模式匹配[:alnum:] 字母和数字[:alpha:] 代表任何英文大小写字符&#xff0c;亦即 A-Z, a-z[:lower:] 小写字母,示例:[[:lower:]],相当于[a-z][:upper:] 大…

VS使用技巧

VS使用技巧 1、展开和缩进代码2、代码注释和取消注释 1、展开和缩进代码 缩进&#xff1a;ctrlmo 展开&#xff1a;ctrlml 2、代码注释和取消注释 注释&#xff1a;ctrlkc 取消注释&#xff1a;ctrlku

网络通信安全

一、网络通信安全基础 TCP/IP协议简介 TCP/IP体系结构、以太网、Internet地址、端口 TCP/IP协议简介如下&#xff1a;&#xff08;from文心一言&#xff09; TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff0c;传输控制协议/网际协议&#xff0…

用友NC Cloud importhttpscer接口任意文件上传漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、漏洞描述 用友NC Cloud的importhttpscer接口如果存在任意文件上传…

搭建最新tensorflow 与pytorch环境

1、安装 Anaconda: 如果您尚未安装 Anaconda&#xff0c;首先访问 https://www.anaconda.com/products/distribution/ 下载适用于您操作系统的最新版本。按照官方指南完成安装过程。 2、设置 Conda 源 方法一&#xff1a;命令行配置 临时使用&#xff1a; 如果您只想临时为…

开源文本嵌入模型M3E

进入正文前&#xff0c;先扯点题外话 这两天遇到一个棘手的问题&#xff0c;在用 docker pull 拉取镜像时&#xff0c;会报错&#xff1a; x509: certificate has expired or is not yet valid 具体是下面&#x1f447;这样的 rootDS918:/volume2/docker/xiaoya# docker pul…

恒峰智慧科技—森林守护者:森林消防泵如何助力灭火?

在茂密的森林中&#xff0c;一场突如其来的火灾可能带来无法估量的破坏。幸运的是&#xff0c;森林消防泵的出现&#xff0c;帮助我们对抗这些威胁。本文将深入探讨森林消防泵如何在灭火工作中发挥重要作用。 一、森林消防泵的功能和重要性&#xff1a; 首先&#xff0c;我们需…

探索人工智能的边界:GPT 4.0与文心一言 4.0免费使用体验全揭秘!

探索人工智能的边界&#xff1a;GPT与文心一言免费试用体验全揭秘&#xff01; 前言免费使用文心一言4.0的方法官方入口进入存在的问题免费使用文心一言4.0的方法 免费使用GPT4.0的方法官方入口进入存在的问题免费使用GPT4.0的方法 前言 未来已来&#xff0c;人工智能已经可以…

Hive安装与配置实战指南

Hive安装与配置实战指南 在大数据领域中&#xff0c;Hive以其类SQL的查询语言HQL、可扩展的数据仓库能力和对Hadoop生态系统的良好集成&#xff0c;成为了数据分析和处理的重要工具。本文将指导您完成Hive的安装与配置&#xff0c;帮助您快速搭建起自己的Hive环境。 一、环境…

FreeSWITCH rtp 统计

现在能想到的是几个办法&#xff1a; 1. cdr 增加下面元素&#xff1a; rtp_audio_in_raw_bytes rtp_audio_in_media_bytes rtp_audio_in_packet_count rtp_audio_in_media_packet_count rtp_audio_in_skip_packet_count rtp_audio_in_jb_packet_count rtp_audio_in_dtmf_pac…

06.2_c/c++开源库boost_coroutine2 协程库

1.安装与说明 安装 sudo apt install libboost-coroutine1.71-dev 编译链接 libboost-coroutine不支持.pc格式查看, 支持.cmake导入 cat /usr/lib/x86_64-linux-gnu/cmake/boost_coroutine-1.71.0/boost_coroutine-config.cmake cat /usr/lib/x86_64-linux-gnu/cmake/boost…

mac 桌面不能右键 文件也不见了 但在finder的桌面上有

mac 桌面不能右键 文件也不见了 但在finder的桌面上有 出现该现象&#xff0c;可能是因为安装了带有隐藏桌面文件功能的软件&#xff0c;无意中操作引起的。可以利用终端轻松解决&#xff1a; 1、在Launchpad中找到终端并打开&#xff1a; 2、粘贴如下代码&#xff0c;回车即…

在Docker中运行Jenkins容器:从入门到实践

Jenkins作为一个流行的持续集成和持续交付(CI/CD)工具&#xff0c;其强大的功能和广泛的插件支持使其成为自动化软件开发流程的首选。结合Docker容器化技术&#xff0c;可以轻松地在任何支持Docker的平台上部署和运行Jenkins&#xff0c;实现环境一致性、快速部署和易于管理的C…

Matlab|基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理

1 主要内容 该程序复现《基于元模型优化算法的主从博弈多虚拟电厂动态定价和能量管理》模型&#xff0c;建立运营商和多虚拟电厂的一主多从博弈模型&#xff0c;研究运营商动态定价行为和虚拟电厂能量管理模型&#xff0c;模型为双层&#xff0c;首先下层模型中&#xff0c;构建…

【Android】android 10 jar_sdk_library添加

前言 当前项目遇到客户&#xff0c;Android 10 平台&#xff0c;需要封装jar_sdk_library给第三方应用使用。其中jar_sdk_library中存在aidl文件。遇到无法编译通过问题。 解决 system/tools/aidl修改 Android.bp修改

frp改造Windows笔记本实现家庭版免费内网穿透

文章目录 前言frp原理Windows服务端IP检验IP固定软件下载端口放行端口映射开机启动 NAS客户端端口查询软件下载端口检验穿透测试自启设置 Ubuntu客户端软件下载后台启动 后记 前言 之前一直用花生壳远程控制一个服务器&#xff0c;但最近内网的网络策略似乎发生了变化&#xf…

数学与机器学习:共舞于智能时代的双璧

随着人工智能的崛起&#xff0c;机器学习作为其核心技术之一&#xff0c;正引领着新一轮的科技革命。而在这场革命中&#xff0c;数学以其深邃的理论和精妙的工具&#xff0c;为机器学习提供了坚实的支撑。数学与机器学习之间的关系&#xff0c;如同琴瑟和鸣&#xff0c;共同编…

信息系统项目管理师0068:数据标准化(5信息系统工程—5.2数据工程—5.2.2数据标准化)

点击查看专栏目录 文章目录 5.2.2数据标准化1.元数据标准化2.数据元标准化3.数据模式标准化4.数据分类与编码标准化5.数据标准化管理记忆要点总结5.2.2数据标准化 数据标准化是实现数据共享的基础。数据标准化主要为复杂的信息表达、分类和定位建立相应的原则和规范,使其简单化…

谷歌发布基于声学建模的无限虚拟房间增强现实鲁棒语音识别技术

声学室模拟允许在AR眼镜上以最少的真实数据进行训练&#xff0c;用于开发鲁棒的语音识别声音分离模型。 随着增强现实&#xff08;AR&#xff09;技术的强大和广泛应用&#xff0c;它能应用到各种日常情境中。我们对AR技术的潜能感到兴奋&#xff0c;并持续不断地开发和测试新…