当前位置：首页 > news >正文

如何在 React 中实现错误边界？

news 来源：原创 2025/8/16 11:28:01

在 React 中实现错误边界

错误边界是 React 提供的一种机制，用于捕获子组件树中的 JavaScript 错误，并展示回退 UI。它可以帮助开发者更好地处理错误，提升用户体验。本文将详细介绍如何在 React 中实现错误边界，包括其工作原理、实现步骤、最佳实践以及常见问题。

1. 什么是错误边界？

错误边界是一个 React 组件，可以捕获其子组件树中发生的 JavaScript 错误。错误边界只会捕获以下两种类型的错误：

渲染过程中发生的错误
生命周期方法中发生的错误
在构造函数中抛出的错误

需要注意的是，错误边界不会捕获以下类型的错误：

事件处理器中的错误
异步代码中的错误（如 setTimeout、Promise 等）
服务器端渲染中的错误
自身抛出的错误

2. 错误边界的工作原理

错误边界利用 React 的生命周期方法 componentDidCatch 和 getDerivedStateFromError 来捕获错误并更新组件状态。具体来说：

getDerivedStateFromError：当子组件抛出错误时，React 会调用此方法。你可以在此方法中更新状态以渲染备用 UI。
componentDidCatch：此生命周期方法在错误被捕获后调用，你可以在这里执行一些副作用，比如记录错误信息。

3. 实现错误边界

3.1 创建错误边界组件

以下是一个简单的错误边界组件的实现：

import React from 'react';class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新状态以渲染备用 UIreturn { hasError: true };}componentDidCatch(error, errorInfo) {// 你可以在此处记录错误信息console.error("Error caught by ErrorBoundary: ", error, errorInfo);}render() {if (this.state.hasError) {// 渲染备用 UIreturn <h1>出错了！请稍后再试。</h1>;}return this.props.children; }
}export default ErrorBoundary;

3.2 使用错误边界组件

你可以将错误边界组件包裹在你想要监控的子组件周围。示例如下：

import React from 'react';
import ErrorBoundary from './ErrorBoundary';const BuggyComponent = () => {// 故意抛出错误throw new Error("这是一个错误！");
};const App = () => {return (<ErrorBoundary><h1>欢迎来到我的应用！</h1><BuggyComponent /></ErrorBoundary>);
};export default App;

在这个例子中，当 BuggyComponent 抛出错误时，错误边界会捕获到错误，并渲染备用 UI。

4. 错误边界的最佳实践

4.1 使用多个错误边界

在大型应用中，可能会有多个地方需要捕获错误。可以在应用中使用多个错误边界，以便更精细地控制错误处理。例如，你可以在某些特定的子树中使用错误边界，而在其他地方使用不同的错误边界。

const App = () => {return (<div><ErrorBoundary><ComponentA /></ErrorBoundary><ErrorBoundary><ComponentB /></ErrorBoundary></div>);
};

4.2 记录错误信息

在 componentDidCatch 方法中，你可以将错误信息记录到外部服务中，例如 Sentry 或 LogRocket。这可以帮助你更好地了解应用中的错误。

componentDidCatch(error, errorInfo) {// 记录错误信息到外部服务logErrorToMyService(error, errorInfo);
}

4.3 提供用户反馈

在备用 UI 中，你可以提供更有用的信息，例如：

提供重试按钮
提供导航链接回到安全的页面
提供错误报告功能

render() {if (this.state.hasError) {return (<div><h1>出错了！</h1><button onClick={() => this.setState({ hasError: false })}>重试</button></div>);}return this.props.children;
}

5. 错误边界的局限性

尽管错误边界非常有用，但它们也有一些局限性：

5.1 不捕获某些错误

错误边界无法捕获事件处理器、异步代码或服务器端渲染中的错误。因此，仍然需要在这些地方做好错误处理。

5.2 组件不应成为错误边界

错误边界应该是高阶组件，通常不应该将它们与业务逻辑混合在一起。为了保持代码的可读性和可维护性，建议将错误边界单独定义。

5.3 状态管理

错误边界的状态管理可能会变得复杂，特别是在有多个错误边界的情况下。建议使用状态管理库（如 Redux 或 Zustand）来集中管理错误状态。

6. 处理网络请求中的错误

在处理网络请求时，可以结合错误边界与其他错误处理机制。通常，可以在组件内部使用 try-catch 块来捕获网络请求的错误。例如：

import React, { useEffect, useState } from 'react';const DataFetchingComponent = () => {const [data, setData] = useState(null);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch("https://api.example.com/data");if (!response.ok) {throw new Error("网络错误");}const result = await response.json();setData(result);} catch (error) {setError(error);}};fetchData();}, []);if (error) {return <h1>获取数据失败：{error.message}</h1>;}return <div>{data ? JSON.stringify(data) : "加载中..."}</div>;
};

在这个例子中，网络请求的错误被捕获并在组件内部处理，而不是通过错误边界。

7. 总结

错误边界是 React 中非常重要的一个特性，可以帮助开发者捕获和处理错误，提升用户体验。通过实现错误边界组件，可以优雅地处理子组件中的错误，并提供备用 UI。

如何在 React 中实现错误边界？

在 React 中实现错误边界错误边界是 React 提供的一种机制，用于捕获子组件树中的 JavaScript 错误，并展示回退 UI。它可以帮助开发者更好地处理错误，提升用户体验。本文将详细介绍如何在 React 中实现错误边界，包括其工作原理、…...

编程日记 2025/8/16 11:28:01

从头开始开发基于虹软SDK的人脸识别考勤系统(python+RTSP开源)（五）完整源码已上传！

本篇是对照之前代码剩余的部分代码做补充，分享给大家，便于对照运行测试。完整版的全功能单文件版本已上传！https://download.csdn.net/download/xiaomage_cn/90484179 人脸识别抽象层，这个大家应该都知道，就是为了方…...

编程日记 2025/8/16 11:35:21

PySide(PyQT)的mouseMoveEvent()和hoverMoveEvent()的区别

在 PySide中，mouseMoveEvent 和 hoverMoveEvent 都是用于处理鼠标移动相关操作的事件，但它们之间存在明显的区别： 事件触发条件 • mouseMoveEvent： 当鼠标在对应的图形项（如 QGraphicsPixmapItem&#xff09…...

编程日记 2025/8/16 13:06:16

【通缩螺旋的深度解析与科技破局路径】

通缩螺旋的深度解析与科技破局路径一、通缩螺旋的形成机制与恶性循环通缩螺旋（Deflationary Spiral）是经济学中描述价格持续下跌与经济衰退相互强化的动态过程，其核心逻辑可拆解为以下链条： 需求端萎缩：居民消费信…...

编程日记 2025/8/16 12:51:47

【如何使用云服务器与API搭建专属聊天系统：宝塔面板 + Openwebui 完整教程】

文章目录不挑电脑、不用技术，云服务器 API 轻松搭建专属聊天系统，对接 200 模型，数据全在自己服务器，安全超高一、前置准备：3 分钟快速上手指南云服务器准备相关账号注册二、手把手部署教程（含代码块&a…...

编程日记 2025/8/17 5:48:30

Oracle数据库存储结构--逻辑存储结构

数据库存储结构：分为物理存储结构和逻辑存储结构。物理存储结构：操作系统层面如何组织和管理数据逻辑存储结构：Oracle数据库内部数据组织和管理数据，数据库管理系统层面如何组织和管理数据 Oracle逻辑存储结构数据库的逻…...

编程日记 2025/8/16 12:43:37

C++ 左值（lvalue）和右值（rvalue）

在 C 中，左值（lvalue）和右值（rvalue）是指对象的不同类别，区分它们对于理解 C 中的表达式求值和资源管理非常重要，尤其在现代 C 中涉及到移动语义（Move Semantics）和完美转…...

编程日记 2025/8/16 12:28:38

《实战AI智能体》DeepSearcher 的架构设计

DeepSearcher 的架构设计一个通往搜索AGI的Agentic RAG应该如何设计？ 从架构上看，DeepSearcher 主要分为两大模块。一个是数据接入模块，通过Milvus向量数据库来接入各种第三方的私有知识。这也是DeepSearcher相比OpenAI的原本DeepResearc…...

编程日记 2025/8/17 5:43:40

Kotlin 继承

Kotlin 继承概述 Kotlin 是一种现代的编程语言，它具有简洁、安全、互操作性等特点。在面向对象编程中，继承是一种非常重要的特性，它允许我们创建具有共同属性和方法的类。本文将详细介绍 Kotlin 中的继承机制，包括继承的基本概…...

编程日记 2025/8/17 5:51:44

【6】树状数组学习笔记

前言树状数组是我学的第一个高级数据结构，属于 log ⁡ \log log 级数据结构。其实现在一般不会单独考察数据结构，主要是其在其他算法（如贪心，DP）中起到优化作用。长文警告：本文一共 995 995 995 行…...

编程日记 2025/8/16 11:54:46

【RISCV LAB】0x01-安装实验仿真辅助工具

安装实验辅助工具实验环境搭建安装 Verilator编译依赖下载源码编译安装测试安装安装 RISC-V 交叉编译工具链编译依赖下载源码编译安装编译并安装添加环境变量并测试安装 GTKWave其他模拟器推荐RARSemulsiV FAQ 实验环境搭建 Verilator 是一款开源的支持 Verilog 和 SystemV…...

编程日记 2025/8/17 5:49:29

OSPF-2 邻接建立关系

上一期我们说了OSPF的邻居建立关系以及OSPF邻居关系建立中建立失败的因素以及相关实验案例这一期我们来说说OSPF的邻接关系建立时需要交互哪些报文以及失败因素及原因和相关实验案例一、概述在运行了OSPF的网络当中为了交互链路状态信息和路由信息,互相之间需要建立邻接关…...

编程日记 2025/8/16 12:52:38

操作系统知识点29

1.当用户使用外部设备时，其控制设备的命令传递途径依次为用户应用层->设备独立层->设备驱动层->设备硬件 2.通常用于管理空闲物理内存的方法：空闲快链表法；位示图法；空闲页面表 3. 可用于文件的存取控制和保护的方法&a…...

编程日记 2025/8/16 9:43:53

【Java篇】行云流水，似风分岔：编程结构中的自然法则

文章目录 Java 程序逻辑控制：顺序、分支与循环结构全面解析一、顺序结构二、分支结构2.1 if 语句2.1.1 基本语法2.1.2 if-else 语句2.1.3 if-else if-else 语句 2.2 switch 语句三、循环结构3.1 while 循环3.2 break 语句3.3 continue 语句3.4 for 循环四、输入输…...

编程日记 2025/8/16 9:42:41

代码块与设计模式

文章目录 1.代码块1.1基本介绍基本语法 1.2代码块的好处和案例演示1.3代码块使用注意事项和细节讨论!!! 2.单例设计模式2.1什么是设计模式2.2什么是单例模式2.2.1饿汉式2.2.2懒汉式2.2.3比较 1.代码块 1.1基本介绍代码化块又称为初始化块,属于类中的成员[即是类的一部分]&am…...

编程日记 2025/8/16 9:43:54

要登录的设备ip未知时的处理方法

目录 1 应用场景... 1 2 解决方法：... 1 2.1 wireshark设置... 1 2.2 获取网口mac地址，wireshark抓包前预过滤掉自身mac地址的影响。... 2 2.3 pc网口和设备对接... 3 2.3.1 情况1：... 3 2.3.2 情…...

编程日记 2025/8/16 9:42:39

CentOS 系统安装 docker 以及常用插件

博主用的的是WindTerm软件链接的服务器，因为好用 1.链接上服务器登入后，在/root/目录下 2.执行以下命令安装docker sudo yum install -y yum-utilssudo yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.reposudo…...

编程日记 2025/8/16 9:44:07

统计字符 #include<stdio.h> #include<string.h> int main(){char str1[5],str2[80];while(gets(str1)){if(strcmp(str1,"#")0)break;gets(str2);for(int i0;i<strlen(str1);i){int sum0;for(int j0;j<strlen(str2);j){if(str1[i]str2[j])sum;}p…...

编程日记 2025/8/16 10:02:47

Node.js REPL 深入解析

Node.js REPL 深入解析引言 Node.js 作为一种流行的 JavaScript 运行环境，在服务器端开发中扮演着重要角色。REPL（Read-Eval-Print Loop，读取-求值-打印循环）是 Node.js 的一个核心特性，它允许开发者在一个交互式环境中执行 JavaScript 代码。本文将深入探讨 Node.js R…...

编程日记 2025/8/16 11:45:22

【测试语言基础篇】Python基础之List列表

一、Python 列表(List) 序列是Python中最基本的数据结构。序列中的每个元素都分配一个数字 - 它的位置，或索引，第一个索引是0，第二个索引是1，依此类推。 Python有6个序列的内置类型，但最常见的是列表和元组。序列都可…...

编程日记 2025/8/16 13:06:58

中山六院团队发表可解释多模态融合模型Brim，可以在缺少分子数据时借助病理图像模拟生成伪基因组特征｜顶刊解读·25-02-14

小罗碎碎念在癌症诊疗领域，精准预测患者预后对临床决策意义重大。传统的癌症分期系统，如TNM分期，因无法充分考量肿瘤异质性，难以准确预测患者的临床结局。而基于人工智能的多模态融合模型虽有潜力，但在实际临床应用中…...

编程日记 2025/8/16 11:43:23

《基於Python的网络爬虫抓包技术研究与应用》

## 摘要本文探讨了基于Python的网络爬虫抓包技术及其应用。随着互联网数据的快速增长，网络爬虫技术在数据采集和分析中扮演着越来越重要的角色。本研究首先介绍了网络爬虫的基本概念和Python在爬虫开发中的优势，然后深入分析了抓包技术的原理和常用工具…...

编程日记 2025/8/16 12:50:14

从零开始探索C++游戏开发：性能、控制与无限可能

一、为何选择C开发游戏？ 在虚幻引擎5渲染的次世代画面背后，在《巫师3》的庞大开放世界中，在《毁灭战士》的丝滑60帧战斗里，C始终扮演着核心技术角色。这门诞生于1983年的语言，至今仍占据着游戏引擎开发语言使用率榜首…...

编程日记 2025/8/16 12:17:28

TypeScript 高级类型 vs JavaScript：用“杂交水稻”理解类型编程

如果把 JavaScript 比作乐高积木，TypeScript 就是一套智能积木系统。本文将用最生活化的比喻，带你理解 TypeScript 那些看似复杂的高级类型。一、先看痛点：JavaScript 的“薛定谔类型” // 场景：用户信息处理 function getUserI…...

编程日记 2025/8/16 11:17:35

几款可用于绘制工艺原理图的开源框架

一、LogicFlow 由滴滴团队开发的开源流程图框架，支持高度定制的工艺原理图绘制。 • 核心特性： • 提供拖拽式界面和丰富的节点类型（矩形、圆形、多边形等），支持自定义节点形状、样式和交互逻辑。 • 支持插件扩展&am…...

编程日记 2025/8/16 12:52:22

STM32如何精准控制步进电机？

在工业自动化、机器人控制等场合，步进电机以其高精度、开环控制的特性得到了广泛应用。而在嵌入式系统中，使用STM32进行步进电机的精确控制，已成为开发者的首选方案之一。本文将从嵌入式开发者的角度，深入探讨如何基于STM32 MCU…...

编程日记 2025/8/16 12:14:06

Go语言入门基础详解

一、语言历史背景 Go语言由Google工程师Robert Griesemer、Rob Pike和Ken Thompson于2007年设计，2009年正式开源。设计目标： 兼具Python的开发效率与C的执行性能内置并发支持（goroutine/channel）简洁的类型系统现代化的包管理跨…...

编程日记 2025/8/16 13:02:56

WPF窗口读取、显示、修改、另存excel文件——CAD c#二次开发

效果如下： using System.Data; using System.IO; using System.Windows; using Microsoft.Win32; using ExcelDataReader; using System.Text; using ClosedXML.Excel;namespace IfoxDemo {public partial class SimpleWindow : Window{public SimpleWindow(){Initi…...

编程日记 2025/8/16 12:09:45

Ubuntu 服务器安装 Python 环境的详细指南

以下是在 Ubuntu 上安装 Python 3.10 的详细步骤（兼容 Ubuntu 20.04/22.04）： 方法一：通过 PPA 仓库安装（推荐） 1. 添加 deadsnakes PPA sudo apt update sudo apt install software-properties-common s…...

编程日记 2025/8/16 11:24:54

鸿蒙next 多行文字加图片后缀实现方案

需求实现类似iOS的YYLabel之类的在文字后面加上图片作为后缀的样式，多行时文字使用…省略超出部分，但必须保证图片的展现。系统方案在当前鸿蒙next系统提供的文字排版方法基本没有合适使用的接口，包括imagespan和RichEditor,根据AI的回…...

编程日记 2025/8/16 2:22:35

STM32---FreeRTS队列集

一、简介一个队列只允许任务间传递的消息为同一种数据类型，如果需要在任务间传递不同数据类型的消息时，那么就可以使用队列集 ！ 作用：用于对多个队列或信号量进行“监听”，其中不管哪一个消息到来，都可让…...

编程日记 2025/8/16 11:51:34

oracle11.2.0.4 RAC 保姆级静默安装（二) DB数据库软件

1.响应文件配置 [rootdb11g1 software]# su - oracle [oracledb11g1 ~]$ cd /software/database/ [oracledb11g1 database]$ cd response/ [oracledb11g1 response]$ vi db_install.rsp oracle.install.optionINSTALL_DB_SWONLY ORACLE_HOSTNAMEdb11g1 UNIX_GROUP_NAME…...

编程日记 2025/8/16 11:23:10

用python代码将excel中的数据批量写入Json中的某个字段，生成新的Json文件

需求需求： 1.将execl文件中的A列赋值给json中的TrackId，B列赋值给json中的OId 要求 execl的每一行，对应json中的每一个OId json 如下： {"List": [{"BatchNumber": "181-{{var}}",// "Bat…...

编程日记 2025/8/16 8:30:44

【每日学点HarmonyOS Next知识】状态变量、动画UI残留、Tab控件显示、ob前缀问题、文字背景拉伸

1、HarmonyOS 怎么用一个变量观察其他很多个变量的变化？ 有一个提交按钮的颜色，需要很多个值非空才变为红色，否则变为灰色，可不可以用一个变量统一观察这很多个值，去判断按钮该显示什么颜色，比如Button().…...

编程日记 2025/8/16 11:27:01

【第五节】windows sdk编程：windows 控件基础

目录一、控件概述二、标准控件三、通用控件四、控件的创建五、控件风格六、控件相关的消息 6.1 控件控制消息 6.2 控件通知消息一、控件概述控件是 Windows 系统内置的窗口类，它们只能是某个窗口的子窗口。因此，创建控件时必须使用 WS_C…...

编程日记 2025/8/16 12:28:29

架构师论文《论云原生架构及其应用》

【摘要】 2022年3月，我作为系统架构师参与了某大型零售企业“智能化供应链管理平台”项目的设计与实施工作。该平台旨在整合企业分散在不同区域的仓储、物流、库存及订单系统，构建统一管理的云原生架构，以应对业务季节性峰值带来的弹性伸缩需…...

编程日记 2025/8/16 12:36:02

Centos 7 安装达梦数据库

一、环境准备 1. 确认操作系统的版本和数据库的版本是否一致 cat /etc/redhat-release 2. 关闭防火墙查看防火墙状态 firewall-cmd --state 停止firewall systemctl stop firewalld.service 禁止firewall开机启动 systemctl disable firewalld.service 3. 修改文件l…...

编程日记 2025/8/16 11:49:37

46.全排列

46.全排列力扣题目链接给定一个不含重复数字的数组 nums ，返回其所有可能的全排列。你可以按任意顺序返回答案。示例 1： 输入：nums [1,2,3] 输出：[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#xff1a…...

编程日记 2025/8/16 9:43:40

RabbitMQ (Java)学习笔记

目录一、概述 ①核心组件 ②工作原理 ③优势 ④应用场景二、入门 1、docker 安装 MQ 2、Spring AMQP 3、代码实现 pom 依赖配置RabbitMQ服务端信息发送消息接收消息三、基础 work Queue 案例消费者消息推送限制（解决消息堆积方案之一&#…...

编程日记 2025/8/16 12:52:58

2-002：MySQL 索引的最左前缀匹配原则是什么？

MySQL 索引的最左前缀匹配原则最左前缀匹配原则（Leftmost Prefix Matching） 是指： 当查询使用了复合索引（联合索引） 时，MySQL 会优先匹配索引的最左列，然后逐步向右匹配，直到遇到…...

编程日记 2025/8/15 20:27:09

【Python 数据结构 15.哈希表】

目录一、哈希表的基本概念 1.哈希表的概念 2.键值对的概念 3.哈希函数的概念 4.哈希冲突的概念 5.常用的哈希函数 Ⅰ、直接定址法 Ⅱ、平方取中法 Ⅲ、折叠法 Ⅳ、除留余数法 Ⅴ、位与法 6.哈希冲突的解决方案 Ⅰ、开放定址法 Ⅱ、链地址法 7.哈希表的初始化 8.哈希表的元素插…...

编程日记 2025/8/16 11:36:04

校园安全用电怎么保障？防触电装置来帮您

引言随着教育设施的不断升级和校园用电需求的日益增长，校园电力系统的安全性和可靠性成为了学校管理的重要课题。三相智能安全配电装置作为一种电力管理设备，其在校园中的应用不仅能够提高电力系统的安全性，还能有效保障师生的用电安全&am…...

编程日记 2025/8/16 11:47:25

疗养院管理系统设计与实现(代码+数据库+LW)

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装疗养院管理系统软件来发挥其高效地信息处理的作用&#xf…...

编程日记 2025/8/16 12:10:38

基于 Redis Stream 实现消息队列功能

好长时间没更新了。。。。。。背景：举个例子在某个接口执行完成后只需要前半段返回结果，后半段可能是日志记录、下游系统调用等功能的情况下，将耗时的消息进行异步发送就显得很有必要，这时就有很多种选择，单体项目甚至…...

编程日记 2025/8/16 9:43:29

单元测试、系统测试、集成测试、回归测试的步骤、优点、缺点、注意点梳理说明

单元测试、系统测试、集成测试、回归测试的梳理说明单元测试步骤： 编写测试用例，覆盖代码的各个分支和边界条件。使用测试框架（如JUnit、NUnit）执行测试。检查测试结果，确保代码按预期运行。修复发现的缺陷并重新测…...

编程日记 2025/8/16 2:50:13

深入理解 HTML 中的＜div＞和元素：构建网页结构与样式的基石

一、引言在 HTML 的世界里，<div>和元素虽看似普通，却扮演着极为关键的角色。它们就像网页搭建过程中的万能积木，能够将各种 HTML 元素巧妙地组合起来，无论是构建页面布局，还是对局部内容进行样式调整&#xff…...

编程日记 2025/8/16 9:43:47

网络安全信息收集[web子目录]：dirsearch子目录爆破全攻略以及爆破字典结合

目录一、dirsearch 工具详细使用攻略 1. 安装前提条件安装步骤可选：直接下载预编译版本 2. 基本用法命令格式参数说明示例 3. 核心功能与高级用法 3.1 多线程加速 3.2 自定义字典 3.3 递归扫描 3.4 过滤响应 3.5 添加请求头 3.6 代理支持 3…...

编程日记 2025/8/16 9:42:43

Mybaties批量操作

1、批量插入 <insert id"batchInsert" parameterType"java.util.List">INSERT INTO t_goods (title,sub_title,origina…...

编程日记 2025/8/16 9:43:59

27.卷2的答案

CSP-J离我们不远了，加加油啦！ 1.堆排序最坏时间复杂度是？ 解析：平时多多练习可知，最坏时间复杂度是O(n log n)。 2.哪条能将s中的数值保留一位，并将第二位四舍五入？ 解析：经过试…...

编程日记 2025/8/16 4:45:35

【 Manus平替开源项目】

文章目录 Manus平替开源项目1 OpenManus1.1 简介1.2 安装教程1.3 运行 2 OWL2.1 简介2.2 安装教程2.3 运行 3 OpenHands（原OpenDevin）3.1 简介3.2 安装教程和运行 Manus平替开源项目 1 OpenManus 1.1 简介开发团队: MetaGPT 核心贡献者（5…...

编程日记 2025/8/16 9:44:06