reactjs - 反应：错误边界没有捕获不变违规

Question

我想处理错误，以防我在 prop 值中有一个对象，而不是有效的反应子。所以我添加了一个错误边界但仍然有一个错误。

Uncaught Invariant Violation：对象作为 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 错误边界无法处理来自反应核心的错误。所以避免“Uncaught Invariant Violation”的解决方案是将有效数据放入道具中