Reactjs 反应错误处理-为什么应用程序崩溃？

有一些基本的东西我错过了，但因为我自己没有找到它，我克服了我的尴尬，并决定张贴在这里

我期望下面的代码呈现“Error”，但不会在之后崩溃。但是，在chrome中运行时，它会崩溃，显示以下内容：

为什么呢？ 代码如下：

App.js：

import React，{Component}来自'React'；
从“组件/子级”导入子级；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={error:null，errorInfo:null}；
}
componentDidCatch（错误，errorInfo）{
这是我的国家({
错误：错误，
errorInfo:errorInfo
});
log（`App/componentDidCatch.error:${error}，errorInfo:`color:#222；background:#dfd'）；
console.log（this.state.errorInfo）；
}
render（）{
console.log（`App/render.error中的%c:${this.state.error}，errorInfo:`color:#222；background:#dfd'）；
console.log（this.state.errorInfo）；
if（this.state.error）{
返回(
错误
);
}
返回(
);
}
}

Child.js

import React，{Component}来自'React'；
导出默认类子扩展组件{
render（）{
抛出新错误（'Child crasted！'）；
返回(
孩子来了
);
}
}

要使其正常工作，您应该在应用程序中包装您的子组件：

import React, { Component } from 'react';

export default class ParentComponent extends Component {
  render() {
    return (
      <App>
        </Child>
      </App>
    );
  }
}

import React，{Component}来自'React'；
导出默认类ParentComponent扩展组件{
render（）{
返回(
对于
react create app
，了解更多信息。
提示：您可以使用x关闭此覆盖（在您的站点上查找）。
要使其正常工作，您应该在应用程序中包装您的子组件：

import React, { Component } from 'react';

export default class ParentComponent extends Component {
  render() {
    return (
      <App>
        </Child>
      </App>
    );
  }
}

import React，{Component}来自'React'；
导出默认类ParentComponent扩展组件{
render（）{
返回(
对于
react create app
，了解更多信息。
提示：您可以使用x关闭此覆盖（在您的站点上查找）.
它为什么会呈现？它不是你返回的一部分。相反，它在到达之前就到达了抛出错误。你确定它不起作用吗？@Tholle实际上，我的问题是一个react本机复杂应用程序在genymotion模拟器上崩溃。我不明白它崩溃的原因，所以我决定在react上编写最简单的应用程序，并对其进行测试我的浏览器，认为这两个应用程序会以类似的方式运行，它们确实会崩溃，而且不会像我预期的那样只显示react组件的错误。@Rahamin好的，我明白了。我不知道可能是什么，我恐怕。我不太擅长react Native。@Yossi Chrome不会崩溃，CRA内置了这个屏幕来突出显示错误在dev mod中。它为什么会呈现？它不是返回的一部分。相反，它在到达之前就到达了抛出错误。你确定它不工作吗？@Tholle实际上，我的问题是一个react本机复杂应用程序在genymotion模拟器上崩溃。我不明白它为什么会崩溃，所以我决定在react and test上编写最简单的应用程序它在我的浏览器上运行，认为这两个应用程序将以类似的方式运行，它们确实会崩溃，而且不会像我预期的那样显示react组件的错误。@Rahamin好吧，我明白了。我不知道它可能是什么，我恐怕。我不太擅长react Native。@Yossi Chrome没有崩溃，CRA内置了这个屏幕来突出显示dev mod中的错误。好吧，我没有发布呈现应用程序的代码…我认为示例中不需要这个…我正在引用App.js。你发布了。还有一件事让我困惑。你没有设置一个调试器来捕获所有抛出/错误吗？这样它就不会像你所希望的那样工作。“设置调试器”是什么意思？我有一个由创建的应用程序创建react应用程序，我正在运行“npm start”…嘿，我已经更新了答案（底部）。我正在研究react本机问题。嗯，我没有发布呈现应用程序的代码…我认为示例中不需要此代码…我正在引用App.js。你发布了。还有一件事让我困惑。你没有设置调试器来捕获所有抛出/错误吗？这样它就不会按照你的意愿工作。你在“设置调试器”中的意思是什么？我知道了我有一个由create react应用程序创建的应用程序，我正在运行“npm start”…嘿，我已经更新了答案（底部）。我正在研究react本机问题。
import React, { Component } from 'react';

export default class ParentComponent extends Component {
  render() {
    return (
      <App>
        </Child>
      </App>
    );
  }
}

render() {
  console.log(`%c In App/render. error: ${this.state.error}, errorInfo:`, 'color: #222; background: #dfd');
  console.log(this.state.errorInfo);
  if (this.state.error) {
    return (
      <div>
        Error
      </div>
    );
  }

  return this.props.children
}