React.js 中的錯誤邊界

錯誤邊界機制有助於 生產 中向用戶顯示有意義的錯誤訊息，而不是顯示任何程式語言錯誤。

建立一個 react 類元件

import React, {Component} from 'react';
class ErrorBoundary extends Component{
   state={
      isErrorOccured:false,
      errorMessage:''
   }
   componentDidCatch=(error,info)=>{
      this.setState({isErrorOccured:true,errorMessage:error});
   }
   render(){
      if(this.state.isErrorOccured){
         return <p>Something went wrong</p>
      }else{
         return <div>{this.props.children}</div>
      }
   }
}
export default ErrorBoundary;

我們有一個具有兩個變數 isErrorOccured 和 errorMessage 的狀態物件，如果發生任何錯誤，這兩個變數將更新為 true。

我們使用了 React 生命週期方法 componentDidCatch，該方法接收兩個引數 error 和與其相關的 info。

在 ErrorBoundary 類的 render 方法中，我們正在檢查是否設定了任何錯誤，我們正在顯示一個簡單的錯誤訊息，提示“發生了一些錯誤”。

如果沒有設定錯誤，我們只返回 prop 子元素。

如何使用錯誤邊界

<ErrorBoundary>
   <User/>
</ErrorBoundary>

我們正在包裝子元件，在其中可能發生錯誤，如上面的錯誤邊界中所示。

請注意，此錯誤邊界方法僅適用於構建的生產模式。在開發模式中，它只是在瀏覽器中顯示實際錯誤，而不是這些自定義錯誤。

在生產中使用錯誤邊界有助於在螢幕上向用戶顯示有意義的錯誤訊息，而不是顯示一些技術程式碼錯誤。

Shyam Hande

更新於： 2019 年 9 月 4 日

277 次瀏覽

開啟你的 職業生涯

完成課程後獲得認證

開始