首页 > 专栏 > 前端 > 文章详情
React 中的错误边界在事件处理器中使用关于 try/catch 的行为 发布于:2021-03-27 08:42:24   来源:React   查看:3  讨论:0
try / catch 很棒但它仅能用于命令式代码(imperative code):DCP易塔云建站-模板下载,web开发资源,技术博客
try {DCP易塔云建站-模板下载,web开发资源,技术博客
  showButton();DCP易塔云建站-模板下载,web开发资源,技术博客
} catch (error) {DCP易塔云建站-模板下载,web开发资源,技术博客
  // ...DCP易塔云建站-模板下载,web开发资源,技术博客
}
然而,React 组件是声明式的并且具体指出 什么 需要被渲染:<Button />DCP易塔云建站-模板下载,web开发资源,技术博客
错误边界保留了 React 的声明性质,其行为符合你的预期。例如,即使一个错误发生在 componentDidUpdate 方法中,并且由某一个深层组件树的 setState 引起,其仍然能够冒泡到最近的错误边界。

关于事件处理器

错误边界无法捕获事件处理器内部的错误。DCP易塔云建站-模板下载,web开发资源,技术博客
React 不需要错误边界来捕获事件处理器中的错误。DCP易塔云建站-模板下载,web开发资源,技术博客
与 render 方法和生命周期方法不同,事件处理器不会在渲染期间触发。DCP易塔云建站-模板下载,web开发资源,技术博客
因此,如果它们抛出异常,React 仍然能够知道需要在屏幕上显示什么。DCP易塔云建站-模板下载,web开发资源,技术博客
如果你需要在事件处理器内部捕获错误,使用普通的 JavaScript try / catch 语句:DCP易塔云建站-模板下载,web开发资源,技术博客

//在事件处理器中使用try/catch捕获事件内部错误
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    try {
      // 执行操作,如有错误则会抛出
    } catch (error) {
      this.setState({ error });
    }
  }
  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}
export default ErrorBoundary;

评论

  • 匿名