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>
我们将子组件包装在上面这样的错误边界内可能发生错误的地方。
请注意，这种错误边界方法仅适用于构建的生产模式。在开发模式下，它仅在浏览器上显示实际错误，而不是这些自定义错误。
在生产中使用错误边界有助于在屏幕上显示用户有意义的错误消息，而不是显示一些技术代码错误。
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短