React Js ErrorBoundary 仅适用于主要布局组件，不适用于嵌套组件答案

【问题标题】：React Js ErrorBoundary only working for the main layout components and not for nested componentsReact Js ErrorBoundary 仅适用于主要布局组件，不适用于嵌套组件
【发布时间】：2021-09-15 00:56:46
【问题描述】：

我在我的代码中使用错误边界，当我在渲染主要布局组件的文件中使用它时，它可以工作，例如：

<ErrorBoundary>
<header></header>
</ErrorBoundary>
<ErrorBoundary>
<main/> //this component has an error
</ErrorBoundary>
<ErrorBoundary>
<footer></footer>
</ErrorBoundary>

上述代码有效，并且针对main 组件中的错误显示了回退 UI。但是当我在主组件文件中使用 errorboundary 组件时它不起作用，例如，错误边界不起作用：

class main extends React.Component {
//code
<ErrorBoundary>
{object}
</ErrorBoundary>
//more code

这不起作用，整个应用程序崩溃，只显示一个空白页面。为什么会发生这种情况以及如何处理？谢谢。

【问题讨论】：

根据this，将根组件包装在ErrorBoundry 中应该可以完成这项工作。另外请注意Error boundaries do not catch errors for 有一些错误。
@saeedghotb 感谢您的回答，整个应用程序至少不再崩溃了。但是问题仍然存在，并且不仅删除了{object} 所在的部分并显示了备用UI，它仍然用备用UI 替换了整个组件main。
我不确定您想要的是否可行或是否面临一个好主意，但在开发模式下会弹出错误屏幕以通知开发人员该问题。也许在阅读崩溃消息后按下退出按钮会有所帮助。
@saeedghotb 是的，errorboundary 现在正在工作，但问题是它用后备 UI 替换了整个 main 组件，而不仅仅是呈现 {object} 的屏幕部分跨度>
@saeedghotb 我想通了。 Errorboundary 捕获组件中的错误。所以它之前没有工作，但是当我在错误边界<ErrorComponent/> 之间渲染一个有故障的组件时它工作了。感谢您的帮助

标签： reactjs error-handling react-error-boundary

【解决方案1】：

我想通了。 Errorboundary 捕获组件中的错误。所以它之前没有工作，但是当我在 ErrorBoundary 之间渲染一个错误的组件时，它工作了。

<ErrorBoundary>
<FaultyComponent/>
</ErrorBoundary>

成功了。

【讨论】：