错误边界钩子函数getDerivedStateFromError

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>

当子组件发生错误就会显示发生错误，请稍后再试！而不影响其他页面渲染

更多文章可访问博客