ComponentDidCatch вызывается несколько раз
Я визуализирую компонент по нажатию кнопки. Этот компонент выдает ошибку и оборачивается Error-Boundary. Итак, насколько я понимаю из документации, Error-Boundary должен вызываться, а ошибка должна выдаваться только один раз. Но я заметил, что ошибка возникает несколько раз и в среде prod.
Мой componentDidCatch выглядит так:
componentDidCatch(error, info) {
this.hasError = true;
this.error = error;
this.severity = this.props.severity;
}
Когда я console.info внутри componentDidCatch, он печатает его около 9 раз.
Мои компоненты упаковываются следующим образом:
ReactDOM.render(
<Provider store = {createStoreWithMiddleware(reducers)}>
<ErrorBoundary severity = "FATAL">
<App />
</ErrorBoundary>
</Provider>, document.getElementById('root'));
Приложение - моя основная составляющая. Приложение снова отображает другие компоненты.
<ErrorBoundary severity = "FATAL">
<component1 />
</ErrorBoundary>
Ошибка отображается 9 раз. Может ли кто-нибудь помочь мне понять, почему ошибка возникает так много раз?
@estus как насчет того, чтобы вы прочитали вопрос, который он задает ... дело не в том, что написано в ошибке :)
@amal Ваш компонент повторно визуализируется несколько раз, поэтому componentDidCatch вызывается несколько раз. Я предлагаю вам переместить componentDidCatch в верхний компонент, чтобы он перехватил все ошибки, возникающие в дочерних компонентах.
@Stundji Мой комментарий не о том, что написано в ошибке. Дело в том, что вопрос нарушает правила SO и требует, чтобы пользователи размышляли над кодом, а его можно было просто опубликовать.
@Stundji У меня есть общий компонент ErrorBoundary, который обертывает дочерние компоненты, как показано в документации. Я также обернул свои подкомпоненты внутри ErrorBoundary, чтобы в случае сбоя одного компонента не аварийно завершилось все приложение.
@estus Извините, если из-за ошибки вопрос запутан. Я просто хотел, чтобы кто-нибудь сталкивался с той же проблемой или имел какие-либо идеи относительно того, что может вызывать многократный рендеринг компонента, поскольку я не использую состояние в моем componentDidCatch. Редактируем вопрос, чтобы убрать сообщение об ошибке :)
Как уже предположил Стунджи, имеется несколько ошибок, поскольку внутренняя граница ошибок <ErrorBoundary severity = "FATAL"><component1 />... перемонтирована. На данный момент вопрос не содержит подсказок, почему это может произойти.
Никто, кроме вас, не может сказать, почему возникает ошибка, потому что никто, кроме вас, не видел ваш код. В вопросе отсутствует stackoverflow.com/help/mcve, это не по теме и его можно закрыть. Проблема в том, что написано в ошибке. Объект не определен.