Yegoroot
10/15/2018 - 8:15 PM

ErrorBoundly Компонент обертка

Так как мы можем один компонент встраивать в другой (как вложенность HTML) и потом получать через props return this.props.children, И тогда родительский компонент с методом componentDidCatch помогает отловить ошибки в дочернем элементе подробнее тут https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

<ErrorBoundary key={index}>
    <Car  name={car.name} />
</ErrorBoundary>


// ---- 

import React, { Component } from 'react'

export default class ErrorBoundary extends Component {

    state = { hasError: false }  

    // данный метод будет вызван если его дети выхватят ошиюку
    // т е это обертка !
    componentDidCatch(error, info) {
        this.setState({hasError: true})
    }

    render() {
        if (this.state.hasError) {
            return <h1 style={{color: 'red'}}> Something went wrong </h1>
        }
        return this.props.children
    }
}