react捕获错误（个人笔记，非教程）

自定义一个捕获错误的父组件，子组件可直接被嵌套，这样不用每个子组件都去捕获错了

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
方法一
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }
方法二
  componentDidCatch(error, errorInfo) {
    //
    this.setState({
    	hasError: true
    })
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

使用

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>