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

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

和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关闭此叠加层(在您的网站上查找)。