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

Однако 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.

Надеюсь, это имеет смысл.