如何防止 React 在错误时重新创建组件树？答案

【问题标题】：How to prevent React from recreating component tree on error?如何防止 React 在错误时重新创建组件树？
【发布时间】：2019-06-24 20:22:10
【问题描述】：

我正在开发一个应用程序，该应用程序在 React 组件中的某处引发错误，因此在控制台中出现此错误：

React 将尝试使用您提供的错误边界从头开始重新创建此组件树

我真的不明白为什么 React 会这样做，因为它显然会导致无限的渲染循环（确实如此），因为每次重新渲染时错误都会继续发生。

所以我想知道，可以在某处禁用此行为吗？我不确定是什么原因造成的，如果它只是 React 或其他插件。任何帮助将不胜感激。

【问题讨论】：

您是否在 ErrorBoundary 中呈现后备 UI？
我认为您的 componentWillReciveProps 方法状态的某个地方正在更新。因为它可能会进入无限循环
我相信@MohamedRamrami 是正确的；重新渲染组件使您有机会检查错误状态并渲染回退（这应该会使您看到的任何循环短路）。

标签： reactjs error-handling

【解决方案1】：

我想你的组件ErrorBoundary中有这个方法，只是remove

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.    
     return { hasError: true };
 }

【讨论】：

我不得不删除getDerivedStateFromProps

【解决方案2】：

经过大量挖掘后，我设法将其整理出来。

我在react-hot-loader repo 上找到了解决方案。正如他们所说：

On Hot Module Update we will inject componentDidCatch and a special render
to every Class-based component you have, making Error Boundaries more local.

所以，两种可能的解决方案：

将您的类组件更改为功能组件。
您可以编写自己的错误报告器（指定为 here）。

对我来说，这两种方法都有效。

【讨论】：

【解决方案3】：

React 将尝试使用您提供的错误边界 ErrorBoundary 从头开始重新创建此组件树。

它会重新渲染多次。所以你会得到这个问题。在类 Component 中添加React.PureComponent 它将解决您的问题

【讨论】：