React 错误处理(componentDidCatch)

发布时间：2020-12-15 20:27:13 所属栏目：百科来源：网络整理

导读：前言 ? ?看react 文档突然发现有这个错误处理函数，好像是17年9月出的，这个真的绝了可以帮助我们捕捉错误咯 ? ?React 16 将提供一个内置函数? componentDidCatch ，如果 ? render() ?函数抛出错误，则会触发该函数。官网例子下面这个: class ErrorBounda

前言

? ?看react 文档突然发现有这个错误处理函数，好像是17年9月出的，这个真的绝了可以帮助我们捕捉错误咯

?React 16 将提供一个内置函数?componentDidCatch，如果?render()?函数抛出错误，则会触发该函数。

官网例子

下面这个:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error,info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error,info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

当然你可以把这个组件封装下成为

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

然后在顶部或任何地方，你可以这样使用它

?另一个特性：

componentDidCatch?是包含错误堆栈的 info 对象！

{this.state.info && this.state.info.componentStack}

当然我是这么用的在路由那边

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false
    }
  }
  componentDidCatch(error,info) {
    console.log(error,info)
    this.setState({
      hasError: true
    })
  }
  render() {
    return this.state.hasError ?
      <h2>页面出错了404</h2>
      : (
        <React.Fragment>
          {/* 检验是否有登录信息 */}
          <AutoRoute />
          {/* 有了switch后，匹配到path后就不会再匹配下去了 */}
          <Switch>
            <Route path="/login" component={Login}></Route>
            <Route path=‘/register‘ component={Register}></Route>
            <Route path=‘/chat/:user‘ component={Chat}></Route>
          </Switch>
        </React.Fragment>
      )
  }
}

其实还是组件化比较好一点，毕竟复用性比较高

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!