React 错误边界

了解什么是错误边界

1 错误边界（Error Boundaries）

1.错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。
2.错误边界无法捕获以下场景中产生的错误：事件处理、异步代码（例如 setTimeout ）、服务端渲染、它自身抛出来的错误（并非它的子组件）

2 小案例测试

有一个Parent组件以及Child组件，Child组件用来渲染用户列表，在Parent组件中使用错误边界。如果Child组件出错了就显示备用的界面，否则显示Child组件。
在Parent组件中使用static getDerivedStateFromError()

class Parent extends PureComponent {

    state = {
        hasError: false
    }

    //当Parent的子组件发生错误时，会调用getDerivedStateFromError函数，并携带错误信息
    static getDerivedStateFromError(error){
        console.log(error)
        return {
            hasError: true
        }
    }

    render() {

        const {hasError} = this.state
        return (
            <div className="parent">
                <h1>我是Parent组件</h1>
                {hasError ? <h4>网络繁忙，请稍后再试</h4> : <Child></Child>}

            </div>
        );
    }
}


class Child extends PureComponent {

    state = {
        // userList: [
        //     {
        //         id: '001',
        //         name: 'lx',
        //         age: 18
        //     },{
        //         id: '002',
        //         name: 'xinxin',
        //         age: 18
        //     }
        // ],
        userList: ''
    }
    render() {
        const {userList} = this.state
        console.log('A render',this.props)
        return (
            <div className="child">
            <h1>我是Child组件</h1>
            <ul>
                {
                    userList.map((item)=>{
                    return (
                            <h3 key={item.id}>{item.name} --------{item.age}</h3>
                    )
                })
                }
            </ul>

            </div>
        );
    }
}

如果在开发环境中还是会显示错误，适合用于在生产环境中。
另外，可以在Parent.jsx中使用componentDidCatch()，将错误日志上报给服务器。

class Parent extends PureComponent {

    state = {
        hasError: false
    }

    //当Parent的子组件发生错误时，会调用getDerivedStateFromError函数，并携带错误信息
    static getDerivedStateFromError(error){
        console.log(error)
        return {
            hasError: true
        }
    }
    componentDidCatch(error,info){
        //可以用来统计错误次数，然后发送给后台，用来通知编码人员解决bug
        console.log('渲染组件时出错')
        console.log(error,info)
    }
    render() {

        const {hasError} = this.state
        return (
            <div className="parent">
                <h1>我是Parent组件</h1>
                {hasError ? <h4>网络繁忙，请稍后再试</h4> : <Child></Child>}

            </div>
        );
    }
}

• 本文作者： étoile

• 本文链接： http://sunnyllxx.github.io/2021/04/06/react-error-boundary/

• 版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢你请我吃糖果

微信