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

Question

我缺少一些基本知识，但是由于我自己找不到它，所以我克服了尴尬，决定将其张贴在这里...

我希望以下代码能够呈现“错误”，但之后不会崩溃。但是，在chrome中运行时，它确实崩溃了，并显示以下内容：

那是为什么？

代码如下：

App.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>
    );
  }
}

Child.js

import React, { Component } from 'react';

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

Answer 1

要使其正常工作，您应该将您的Child组件包装在App中：

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
}

您还应该考虑更改App组件的命名。

更新（在评论中讨论之后）。

您正在使用react-create-app，它内置了叠加功能以指示错误。 阅读issue，以获取react-create-app的更多信息。 提示：您可以使用x关闭此叠加层（在您的网站上查找）。