Реакция: граница ошибки не обнаружила инвариантное нарушение

Question

Я хочу обработать ошибку в случае, если вместо действительного дочернего элемента реакции у меня есть объект в значении prop. Итак, я добавляю границу ошибки, но ошибка все еще остается.

Неперехваченное инвариантное нарушение: объекты недопустимы в качестве дочерних элементов React (обнаружено: объект с ключами {})

Почему это происходит? Это не обработчик событий, не SSR и не асинхронный код.

class ErrorBoundary extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
        };
    }

    componentDidCatch(error, info) {
        this.setState({
            hasError: true,
        });
    }

    render() {
        if (this.state.hasError) {
            return '';
        }

        return <Component {...this.props} />;
    }
}

class MyComponent extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    render () {
        return (<ErrorBoundary> {this.props.value} </ErrorBoundary>);
    }
}

Answer 1

Как я понял, границы ошибок React не могут обрабатывать ошибки ядра реакции. Таким образом, решение, позволяющее избежать "неперехваченного инвариантного нарушения", заключается в том, чтобы поместить допустимые данные в реквизиты.