React.js中的错误边界

错误边界机制有助于在生产时向用户显示有意义的错误消息，而不是显示任何编程语言错误。

创建一个反应类组件

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和与之相关的信息。

在ErrorBoundary类的render方法中，我们正在检查是否设置了任何错误，我们正在显示一个简单的错误，指出“发生了错误”

如果没有错误设置，我们只是返回道具孩子

如何使用错误边界

<ErrorBoundary>
   <User/>
</ErrorBoundary>

我们将子组件包装在上面这样的错误边界内可能发生错误的地方。

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

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