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>
        );
    }
}

但是，永远不会显示Something went wrong。我不知道这里出了什么问题，因为那里的所有例子都是一样的。任何想法从哪里开始找到问题？

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

请注意，错误边界仅捕获以下组件中的错误他们在树上。错误边界无法捕获错误本身。如果错误边界尝试呈现错误消息失败，错误将传播到其上方最近的错误边界。这个，也类似于catch {}块在JavaScript中的工作方式。

希望它有意义。

ReactJs ErrorBoundary无法在最简单的场景中工作

1 个答案: