React 错误边界(error boundaries) :异常处理

         由于最近项目中   数据库是导入的以前的题目数据,所以产生了很多不同类型的脏数体验据,在渲染的时候容易报错,而在JS上做异常处理需要判断太多类型,并且体验不好, 所以找了关于React 的异常捕获。 使得在UI部分引起的JS错误不会破坏整个程序。

   error boundaries 是用于捕获其子组件中的JS异常,并且打印出这些错误和演示一个 预备UI(fallback  UI),从而替换那些出现异常的组件。 错误组件在渲染期间,生命周期方法内,以及整个组件构造函数内捕获错误。

   通过componentDidCatch()方法来捕获异常,类似于try catch ,但只有类组件可以成为错误边界。如果一个错误边界无法渲染错误信息,则错误会向上冒泡 至最接近的错误边界。

   代码实现

image.png


 image.png

    所以当 error boudaries 内的子组件 Question 出现错误的时候,会被替换UI,在APP运行过程中就不会产生闪退的现象了。、

注意error  boundaries 不会捕获这些错误。

1事件处理器

2 异步代码

3 服务端的渲染代码

4 在error boundaries内的错误代

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容