web前端全系列 教程
1839个小节阅读:2243.7k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
定义一个错误边界的组件
class 组件中定义了 static getDerivedStateFromError()
或 componentDidCatch()
这两个生命周期方法中的任意一个(或两个)时,那么这个组件就变成一个错误边界的组件。
xxxxxxxxxx
import React, { Component } from 'react'
export default class ErrorBoundary extends Component {
constructor() {
super()
this.state = { }
}
componentDidCatch(error, errorInfo) {
// 捕获到子组件树当中发生的错误时调用
this.setState({
error: error,
errorInfo: errorInfo
})
}
render() {
return (
this.state.errorInfo ? <div>奥,糟糕!!发生了一些错误:
错误信息如下:<br />
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</div> : this.props.children
)
}
}
错误边界的使用
xxxxxxxxxx
//App.js
render() {
return (
<>
<ContextTest />
{/* 使用错误边界组件包裹的组件树,发生的错误都会被这个错误边界捕获 */}
<ErrorBoundary>
<SomethingWrong />
</ErrorBoundary>
</>
)
}
实时效果反馈
1. 添加哪个函数可以捕捉错误边界:
A componentCatch
B componentDidCatch
C componentWillCatch
D componentTryCatch
答案
1=>B