ReactJs ErrorBoundary не работает в простейшем сценарии
Пытаюсь заставить свой 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 никогда не показывается. Я понятия не имею, что здесь не так, поскольку все примеры делают то же самое.
Есть идеи, с чего начать поиск проблемы?
Ответы 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 состоит в том, чтобы обернуть компонент, который выдает ошибку.
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.
Надеюсь, это имеет смысл.
Действительно, ваш пример работает. Спасибо. Значит, я не могу обернуть сам свой компонент в <ErrorBoundary>? Мне нужно создать новый компонент, чтобы обернуть его рамкой?
@KingKerosin yes или реализовать метод componentDidCatch и обрабатывать его в этом методе
Интересная часть (по крайней мере, для меня): идея границ ошибок заключается в том, чтобы обернуть компонент, который выдает ошибку. Потому что это ДОЛЖЕН быть компонент, а не просто обычный дочерний узел.
Фактически вы генерируете ошибку в визуализации границы ошибки, а не в жизненном цикле ее дочерних элементов, поэтому ошибка не улавливается должным образом.