componentDidMount 生命周期方法中子组件抛出的错误未在错误边界中捕获

2024-03-05

我正在学习 React,当 API 服务器不可用时,无法获取错误边界来捕获子组件中 axios http 请求引发的网络连接错误。

我可以看到错误记录在子组件的 catch 处理程序中,但是 ErrorBoundary 组件没有捕获 throw 语句。

任何想法如何让错误边界捕获抛出的错误组件已挂载生命周期方法?

父级 - App.tsx

export class App extends React.Component<AppProps, {}> {
  public render(): JSX.Element {
    return (
      <div>
        <ErrorBoundary>
          <AppBar color="primary" position="static">
            <Toolbar>
              <TypoGraphy variant="h6" color="inherit">
                Course App
              </TypoGraphy>
              <NavBar />
            </Toolbar>
          </AppBar>
          <CourseList />
        </ErrorBoundary>
      </div>
    );
  }
}

子级 - CourseList.tsx

  componentDidMount(): void {
    console.log('CourseList::componentDidMount');

    const dataSource: RestDataCourse = new RestDataCourse();
    dataSource
      .getCourses()
      .then(courseList => {
        this.setState({ courses: courseList });
      })
      .catch(error => {
        console.error(`Error retrieving courses => ${JSON.stringify(error)}`);
        throw error;
      });
  }

错误边界

import * as React from 'react';

interface ErrorBoundaryProps {
  hasError: boolean;
  error: Error;
  info: React.ErrorInfo;
}
export default class ErrorBoundary extends React.Component<
  {},
  ErrorBoundaryProps
> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = { hasError: false, error: undefined, info: undefined };
  }

  componentDidCatch(error: any, info: any): void {
    console.log('ErrorBoundary has encountered an error');
    this.setState({ hasError: true, error: error, info: info });
  }

  render(): {} {
    if (this.state.hasError) {
      return (
        <div id="errorModal" className="modal">
          <div className="modal-content">
            <span className="close">&times;</span>
            <h2>Application Crash</h2>
            <p>Error encountered in application.</p>
            {this.state.error}
          </div>
        </div>
      );
    }

    // Render children if no error
    return this.props.children;
  }
}

误差边界 https://reactjs.org/docs/error-boundaries.html旨在捕获渲染期间、生命周期方法以及其下方整个树的构造函数中的错误。

如果你想全局捕获未处理的 Promise 错误(而不是直接在组件中处理它),你可以使用window.onunhandledrejection https://developer.mozilla.org/en-US/docs/Web/API/PromiseRejectionEvent.

window.onunhandledrejection = function(e) {
  console.log(e.reason);
}

但默认情况下并非所有浏览器都支持它。

小黑客解决方案是打电话this.setState(() => { throw err; }); in catch你的承诺。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

componentDidMount 生命周期方法中子组件抛出的错误未在错误边界中捕获 的相关文章

  • create-react-app 之后 React npm start 不起作用

    我正在学习 React 而且我的英语很差 我已经有两个反应项目 但它们也不起作用 我按照以下步骤操作 npx 创建反应应用程序我的应用程序 cd 我的应用程序 npm 启动 但它不起作用 我尝试清理缓存并再次安装 npm 但没有成功 我该如
  • 使用应用程序文件夹中的 Next.js 读取 URL 动态参数/slug

    我在获取动态路由中的参数时遇到问题 我在阅读时不断收到错误 类型错误 无法解构 router query 的属性 themenID 因为它未定义 另外 我无法使用next router但必须集成路由器next navigation 但这个没
  • QUnit 不会运行测试

    我刚刚开始使用 QUnit 并遇到问题 我目前正在使用 TypeScript 它是一个 JavaScript 编译器 我在与我的主要课程结构平行的课程中进行测试 在每个类中 我都有一个名为 runTests 的函数 为了执行这些测试 我循环
  • 在react-router转换期间我应该如何更新redux存储?

    我面临着如何在发生反应路由器转换时更新存储的问题 在我当前的实现中 如下 在渲染下一页之前更新存储 当当前页面根据下一页的数据获取商店更新时 就会出现问题 1 当前页面毫无意义地呈现 它订阅了商店更新 因为更新的商店是针对下一页的 2 当前
  • 如何强制泛型

    有没有办法在打字稿中将泛型标记为强制 function onSubmit
  • 是否可以覆盖material-ui组件的默认道具?

    可以说我想要每一个Button组件来自material ui有默认的 propsvariant contained color secondary 这可能吗 这方面的文档在这里 https material ui com customiza
  • 样式组件如何影响性能?

    使用样式组件是否比样式表更会降低 Web 应用程序的速度 如果我关心性能并且没有任何依赖于 props 的样式 我是否应该放弃样式组件并使用样式表 当您有很多小组件时 同时使用样式化组件渲染 性能开销可能会很有意义 绝对值得测试以删除小元素
  • 如何在每个测试中更改笑话模拟函数的返回值?

    我的组件测试文件中有一个像这样的模拟模块 jest mock magic index gt navigationEnabled gt true guidanceEnabled gt true 这些函数将在我的组件的渲染函数中调用 以隐藏和显
  • 如何在 package.json 中对嵌套子模块和 TypeScript 使用“导出”?

    我想利用新的优势 出口 https nodejs org api packages html packages exportsNode js 的功能package json这样我就可以执行以下操作 exports dist index js
  • 在从命令行运行的 NestJS 脚本中使用服务

    我知道如何从命令行运行脚本 使用npm or npx ts node script ts 正如所述here https stackoverflow com questions 60704316 run nestjs script from
  • Angular2:setTimeout仅调用一次

    我正在 Angular2 中实现需要使用的功能setTimeout My code public ngAfterViewInit void this authenticate loop private authenticate loop s
  • 如何使用 Cypress 定位没有 id 属性的嵌套输入?

    我正在为 React 项目编写 Cypress 测试 我需要能够瞄准
  • Typescript 找不到模块

    我在 Typescript 的一个文件 upload ts 中有一个导出的模块 我无法在没有错误的情况下导入到另一个文件 application ts 中 另外 我无法导入 ExpressJS 这是Upload ts
  • 处理 Redux 和 React 中错误的最佳实践

    我的 redux 操作中有一个异步函数 它在我的减速器中返回一个像这样的对象 user fetching false fetched false error null 所以基本上当我开始调用异步函数时我将 redux 状态更新为fetchi
  • 添加 CSS 来响应创建的元素,例如 data-reactroot

    在我的根div下 react 自动 创建另一个div 有没有办法向该 div 添加一个类 我需要添加 height 100 来防止背景内容在显示覆盖层时在移动设备中滚动 这就是我检查网站上的元素时显示的方式 单击按钮时 我需要将 heigh
  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 错误找不到“pages”目录。请在项目根目录下创建一个”

    以前我的项目设置是 public next src pages components assets next config js 这工作正常 但我将结构更改为以下 public src client next config js jscon
  • 如何聚焦反应路由器链接

    我有一个用于搜索的输入框 并且希望能够按向下键将焦点从输入移动到列表的第一个s 看来我这里的东西不起作用 因为不是实际的 DOM 节点 我能够使用它来工作 a 代替 though let Link require react router
  • 添加 PayPal 付款方式 Ionic

    我正在尝试在我的用 Ionic 2 3 制作的应用程序上实现 PayPal 付款方式 我已经安装了 ionic cordova plugin add com paypal cordova mobilesdk npm install save
  • Angular 8 Native Typescript 无崩溃,访问器简写

    角8 我曾经在打字稿方面用作简短的黑客 object accessor accessor accessor to get object accessor accessor accessor 如果其中一个子级为空 则不会冒抛出错误的风险 根据

随机推荐