ReactJs ErrorBoundary 在最简单的情况下不起作用

Question

我正在尝试让我的 ErrorBoundary 工作。

ErrorBoundary 与大多数示例一样简单:

export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
    componentDidCatch(error: Error, errorInfo: Object): void {
        this.setState({ catchedError: error });
    }

    render(): JSX.Element | React.ReactNode {
        const { children } = this.props;
        const { catchedError } = this.state;

        if (catchedError)
            return (<div>Something went wrong</div>);

        // return the children
        return children;
    }
}

另一个使用 ErrorBoundary 的组件:

export class Test extends React.Component<ITestProps, ITestState> {
    render(): JSX.Element | React.ReactNode {
        const test:string = null;

        return (
            <ErrorBoundary>
                {test.length}
            </ErrorBoundary>
        );
    }
}

但是，出现错误 从未显示。我不知道这里出了什么问题，因为那里的所有示例都一样。从哪里开始寻找问题有什么想法吗？

Answer 1

首先你必须定义你的状态

constructor(...args){
  super(...args);
  this.state = {
    catchedError: false
  }
}

然后在Test组件内部抛出错误

function Test(){
  throw new Error('I crashed!');
}

当你像下面这样渲染这两个组件时

ReactDOM.render(
  <ErrorBoundary>
    <Test/>          
  </ErrorBoundary>
  ,
  document.getElementById('container')
);

您将获得预期的结果。 Worked demo

Error Boundaries 的思想是包装抛出错误的组件。

来自 react docs

Note that error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how catch {} block works in JavaScript.

希望它有意义。