React.js 中的错误边界
react jsjavascript libraryfront end technology更新于 2025/11/6 23:40:17
错误边界机制有助于在生产中向用户显示有意义的错误消息，而不是显示任何编程语言错误。
创建一个 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 方法中，我们检查是否设置了任何错误，并显示一个简单的错误信息"Something went wrong"
如果没有设置错误，我们只返回 prop children
如何使用错误边界
<ErrorBoundary> <User/> </ErrorBoundary>
我们将子组件包装在错误边界内，使其有可能出现错误，就像上面提到的那样。
请注意，这种错误边界方法仅适用于构建的生产模式。在开发模式下，它只会在浏览器中显示实际错误，而不是这些自定义错误。
在生产环境中使用错误边界有助于在屏幕上向用户显示有意义的错误消息，而不是显示一些技术代码错误。
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
