資料結構
網路
關係型資料庫管理系統（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 千+
廣告