数据结构
网络
关系型数据库管理系统（RDBMS）
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚学
法律学ReactJS componentDidCatch 方法
在本文中，我们将介绍如果在组件中发生一些错误，如何在提交阶段执行一个函数。
当组件或任何子组件在 React 组件生命周期中遇到一些错误时，将调用此方法。此方法允许我们处理应用程序的错误边界。
与 getDerivedStateFromError 方法不同，此方法在提交阶段调用，因此 side-effects 也可以在此方法中允许。
语法
componentDidCatch(err, data)
参数
err - 组件抛出的错误。
data - 存储有关已抛出错误的组件的信息。
示例
在此示例中，我们将构建一个 React 应用程序，如果未发生错误，则显示包含的 Comp 组件；否则显示一些文本。
但是，在这里，在 Comp 组件中，定义在状态未定义时发生错误，该状态触发父组件中的 componentDidCatch 方法。
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
err: false,
};
}
componentDidCatch(error) {
this.setState({
err: true,
});
}
render() {
return (
<div>
{this.state.err ? (
<div style={{border: '2px solid red',}}>
Error
</div>
) : (
<Comp/>
)}
</div>
);
}
}
class Comp extends React.Component {
render() {
return <h1>{this.state.name}</h1>;
}
}
export default App;输出
这将产生以下结果 −
更新于: 2021 年 3 月 18 日
1 千+
广告