React 错误边界（错误捕获）

您所在的位置：网站首页 › 微信怎么看登陆过几个微信号 › React 错误边界（错误捕获）

React 错误边界（错误捕获）

2023-05-03 01:04| 来源: 网络整理| 查看: 265

React 错误边界错误捕获

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。

简单来讲，就是用于：子组件发生错误时，渲染备用UI的组件。

只有 class 组件才可以成为错误边界组件。

大多数情况只需要声明一个错误边界组件，在整个应用去使用。错误边界的粒度根据需求来定。按照理解，比如有一个经典的左右布局，左侧导航栏，右侧内容栏；应该将内容通过“错误边界组件”包裹，当内容发生崩溃，不会影响到导航栏。

用法

可以定义个公共组件，在需要的地方使用这个组件将子组件包裹。

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的 UI return { hasError: true }; } componentDidCatch(error, errorInfo) { // 捕获错误信息 // 你同样可以将错误日志上报给服务器 logErrorToMyService(error, errorInfo); } render() { if (this.state.hasError) { // 渲染错误视图 return Something went wrong.; } // 渲染正确视图 return this.props.children; } } 复制代码

在某组件中使用：

复制代码其它

文档balabala：

注意

错误边界无法捕获以下场景中产生的错误：

事件处理（了解更多）异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）服务端渲染它自身抛出来的错误（并非它的子组件）

异步代码、事件中的错误可以通过try {} catch(e) {}来处理：

class MyComponent extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } onClick(e) { tru { // TODO } catch(err) { this.setState({ hasError: true }) } } render() { const { hasError } = this.state; if (hasError) { return Caught an error. } return Click Me } } 复制代码

The End. Reference zh-hans.reactjs.org/docs/error-…

【本文地址】

React 错误边界（错误捕获）

React 错误边界（错误捕获）

今日新闻

推荐新闻