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>
我们将子组件包装在上面这样的错误边界内可能发生错误的地方。
请注意，这种错误边界方法仅适用于构建的生产模式。在开发模式下，它仅在浏览器上显示实际错误，而不是这些自定义错误。
在生产中使用错误边界有助于在屏幕上显示用户有意义的错误消息，而不是显示一些技术代码错误。