React：错误边界没有捕获不变违规

Question

我想处理错误，以防有效的反应 child 我有一个 object 属性值。所以我添加了一个错误边界，但仍然有错误。

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {})

为什么会这样？它不是事件处理程序，也不是 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 错误边界无法处理来自 React 核心的错误。因此，避免 "Uncaught Invariant Violation" 的解决方案是将有效数据放入 props

React：错误边界没有捕获不变违规

React: Error boundary did not catch Invariant Violation

reactjs

react-error-boundary