《React+Redux前端开发实战》—2.4.4 错误处理

2.4.4  错误处理

　　在渲染期间，生命周期方法或构造函数constructor()中发生错误时将会调用componentDidCatch()方法。

　　React错误处理示例：

　　import React from "react";

　　class ErrorBoundary extends React.Component {

　　  constructor(props) {

　　    super(props);

　　    this.state = { hasError: false };

　　  }

　　  static getDerivedStateFromError(error) {

　　    return { hasError: true };

　　  }

　　  componentDidCatch(error, info) {

　　    this.setState({

　　      hasError: true

　　    });

　　  }

　　  render() {

　　    if (this.state.hasError) {

　　      return <h1>这里可以自定义一些展示，这里的内容能正常渲染。</h1>;

　　    }

　　    return this.props.children;

　　  }

　　}

　　在componentDidCatch()内部把hasError状态设置为true，然后在渲染方法中检查这个状态，如果出错状态是true，就渲染备用界面；如果状态是false，就正常渲染应该渲染的界面。

　　错误边界不会捕获下面的错误：

•  错误边界本身错误，而非子组件抛出的错误。

•  服务端渲染（Server side rendering）。

•  事件处理（Event handlers），因为事件处理不发生在React渲染时，报错不影响渲染）。

•  异步代码。