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>

我们正在包装子组件，在其中可能发生错误，如上面的错误边界中所示。

请注意，此错误边界方法仅适用于构建的生产模式。在开发模式中，它只是在浏览器中显示实际错误，而不是这些自定义错误。

在生产中使用错误边界有助于在屏幕上向用户显示有意义的错误消息，而不是显示一些技术代码错误。

更新于： 2019 年 9 月 4 日

277 次浏览

开启你的 职业生涯

完成课程后获得认证

开始
广告