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

debugcn 发表于 Dev

约西

我缺少一些基本的东西，但由于我自己没有找到，我克服了尴尬并决定在这里发布......

我希望以下代码呈现“错误”，但之后不会崩溃。但是，在 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>
    );
  }
}

月季

为了让它工作，你应该渲染你的子组件包裹在 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内置叠加层来发出错误信号。阅读问题的react-create-app了解更多。提示：您可以使用 x 关闭此叠加层（在您的网站上查找）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。