react-错误边界

错误边界

其实就是一个组件

react组件发生错误时,会层层向上传递直至根组件,设置一个错误边界组件可以防止错误继续向上传递,避免组件树被销毁

App.js

import React, { Component } from 'react'
import ErrorBound from './components/ErrorBound'function ChildA() {throw new Error("发生错误")return (<h1>ChildA</h1>)
}export default class App extends Component {render() {return (<div><ErrorBound><ChildA /></ErrorBound><h1>这会正常渲染</h1></div>)}
}

ErrorBound.js

import { PureComponent } from 'react'export default class ErrorBound extends PureComponent {state = {hasError: false}static getDerivedStateFromError(error) {// 参数为错误对象, 发生时间点为渲染子组件过程中,发生错误之后,更新页面之前// 此组件报错不会运行这个函数// 返回值会覆盖statereturn {hasError: true}}// componentDidCatch(error, info) {//   // error 为错误信息//   // info 为错误传递的路径 比如 组件解构 APP -> A -> B -> C  C组件报错, 则返回 c-b-a-app 四行相关数据//   // 该函数运行时间点: 组件渲染之后, 所以在这通常不改变组件状态,只负责向服务器发送错误信息,用于记录// }render() {// 如果发生错误则不进行渲染if (this.state.hasError) {return null}return this.props.children}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！