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

我遗漏了一些基本的东西,但由于我自己找不到,我克服了自己的尴尬,决定把它贴在这里……

我希望下面的代码呈现“错误”,但不会在之后崩溃。但是,在chrome中运行时,它确实会崩溃,显示以下内容:

为什么?

代码如下:

应用程序JS:

import react,component from'react';
从“components/child”导入子级;

导出默认类应用扩展组件{

建造师(道具){
超级(道具);
this.state=错误:空,错误信息:空
}

componentdidcatch(错误,错误信息){

此.设置状态({
错误:错误,
错误信息:错误信息
(});
console.log(`%c在app/componentdidcatch中。错误:$错误,错误信息:`,'颜色:222;背景:dfd');
console.log(this.state.errorinfo);
}

呈现()。{
console.log(`%c在app/render中。错误:$this.state.error,errorinfo:`,'color:222;background:dfd');
console.log(this.state.errorinfo);
如果(this.state.error){
返回(
<DIV>
误差
</DIV>
;
}

返回(
<DIV>
<儿童/>
</DIV>
;
}
}
子.js

import react,component from'react';

导出默认类子扩展组件{
呈现()。{
引发新错误(“子项已崩溃!”);
返回(
<DIV>
孩子在这里
</DIV>
;
}
}


我希望下面的代码呈现“错误”,但不会在之后崩溃。但是,在chrome中运行时,它确实会崩溃,显示以下内容:



为什么?

代码如下:

应用程序JS:

import React, { Component } from 'react';
import Child from 'components/Child';

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {

    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    console.log(`%c In App/componentDidCatch. error: ${error}, errorInfo:`, 'color: #222; background: #dfd');
    console.log(this.state.errorInfo);
  }

  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 (
      <div>
        <Child />
      </div>
    );
  }
}


儿童JS

import React, { Component } from 'react';

export default class Child extends Component {
  render() {
    throw new Error('Child crashed!');
    return (
      <div>
        Child is here
      </div>
    );
  }
}