徜徉在知识海洋的一群鲸鱼
错误边界
错误边界

错误边界

class组件才能使用,只要在组件定义了static getDerivedStateFromError或者componentDIdCatch任何一个,第一个用于渲染报错UI,第二个用来上传错误原因

可以用在子组件树任何位置发生的错误中,在渲染期间,生命周期和整个组件构造函数中捕获错误,无法处理事件错误,异步错误,服务端渲染,自身的错误

实现案例思路:首先需要A作为错误边界组件,然后需要B作为A的子组件

A定义haserror状态,在static getDerivedStateFromError方法中,如果获取到错误就返回haserror为true,在componentDIdCatch进行错误信息上报,错误信息的两个参数,第一个是throw的信息,第二个是发生错误的位置,并在render中返回报错UI

B组件中使用throw抛出错误信息

<A><B><B/></A>
<C><C/>

最终结果是会显示A的错误UI和C的UI

而发生事件或者异步错误可以使用弹窗,这样不会改变原来页面的UI