react错误边界钩子函数
当某个子组件出现错误不会影响整个webapp的运行
可以检测子组件发生的错误
新建一个组件ErrorBoundry
- getDerivedStateFromError该函数为静态函数
- componentDidCatch发生在子组件渲染发生错误且页面更新之后
import React, { Component } from 'react';
export default class ErrorBoundry extends Component {
constructor(props) {
super(props);
this.state = {
flag: false
};
}
// state中标记这个错误,如果子组件渲染报错,父组件中会触发getDerivedStateFromError,并通过返回对象修改错误标记,最后父组件根据这个错误标记,决定渲染哪个页面
static getDerivedStateFromError(error) {
console.log(error);
return {
flag: true
}
}
/* 只捕获钩子函数中的错误
* error: 抛出的错误
* info: 带有 componentStack key 的对象,其中包含有关组件引发错误的栈信息
*/
componentDidCatch(error, info) {
}
render() {
return (
<div>
{this.state.flag ? <h1>发生错误,请稍后再试!</h1> : this.props.children}
</div>
)
}
}
在layouts/index.js中引入该组件
import ErrorBoundry from '@/components/ErrorBoundry';
...
<ErrorBoundry>{props.children}</ErrorBoundry>
当子组件发生错误就会显示发生错误,请稍后再试!
而不影响其他页面渲染
更多文章可访问博客