Реагируйте: Граница ошибки не уловила Инвариантное Нарушение

Question

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

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

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

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 Error Boundaries не может обрабатывать ошибки от реагирующего ядра. Таким образом, решение о том, как избежать «неперехваченного инвариантного нарушения», заключается в том, чтобы в подпорки были помещены действительные данные