React设置错误边界后,仍然报错

题主开发了一个safeComponent组件,使用错误边界来捕获render错误,防止整个页面的crash。但是我设置static getDerivedStateFromErrorcomponentDidCatch 这两个函数后,将他应用在一个错误的组件中,还是报错。
希望有相关使用经验的大神帮帮忙~~~~

safeComponent源码

import React, {Component} from  'react'
import {View} from  'react-native'

export default class SafeComponent extends Component {
    constructor(props) {
      super(props);
      this.state = { error: null, errorInfo: null, isError:false};
    }

    static getDerivedStateFromError(error) {
        return { isError: true };
      }
    
    componentDidCatch (error) {
        this.setState({isError: true});
        console.log('get the error', error);
    }
    
    render() {
        console.log('render', this.state.isError);
      if (this.state.isError) {
        return (
          <View/>
        );
      }
      return this.props.children;
    }  
  }

errorComponent render源码

render() {
    throw new Error('baocuola!')
}

调用:

<safeComponent>
    <errorComponent/>
</safeComponent>

在rn中的报错信息:
image.png

react version 16.11.0
reactnative version 0.61.2

阅读 828
评论
    2 个回答

    找到问题了,直接在组件中throw一个错误无论是在dev 还是 prod 环境都是捕获不到的;写了一个渲染错误,在dev环境可以捕获,在prod就直接catch住了。react设计者太牛逼了!!!!

      相似问题
      推荐文章