React错误边界Error Boundaries详解_React

static getDerivedStateFromError(error){
   // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true }
}

componentDidCatch(error,errorInfo){
  // 你同样可以将错误日志上报给服务器
  logErrorToMyService(error, errorInfo)
}

class ErrorBoundary extends React.Component {
 constructor(props){
  super(props)
  this.state = { hasError: false} //是否报错
 }
 static getDeriveStateFromError(error){
   // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true }
 }
 componentDidCatch(error,errorInfo){
  // 你同样可以将错误日志上报给服务器
  logErrorToMyService(error, errorInfo)
 }
 render(){
   if(this.state.hasError){
     // 自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
   }
   return this.props.children; 
 }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
//项目中可以用于包裹在路由外面
 <ErrorBoundary>
  <Suspense fallback={<div >Loading...</div>}>
    ...
    <MyWidget />
  </Suspense>
</ErrorBoundary>