为什么componentDidCatch没有阻止应用程序崩溃？

Question

我正在尝试创建一个"失败的鲸鱼"页面,只要应用程序崩溃就会弹出.

为此,我尝试使用"错误边界"以及新的componentDidCatch生命周期方法. https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

到目前为止我没有成功,无论怎样,错误都会导致应用程序崩溃.

这是再现代码:

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

class InnerComponent extends Component {
  render() {
    throw new Error('why isn\'t this working')
    return(
      <View>
        <Text>Why is this rendering?</Text>
      </View>
      )
  }
}

class ErrorBoundary extends Component {
    constructor(props) {
      super(props)
      this.state = { hasError: false }
    }

    componentDidCatch(error, info) {
      this.setState({ hasError: true })
      console.log(error, info)
    }

    render() {
      if (this.state.hasError) {
        return (
          <View>
            <Text>Why is this not rendering?</Text>
          </View>
        )
      }
      return this.props.children
    }
}

export default class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <InnerComponent/>
      </ErrorBoundary>
    );
  }
}

这是我用同样的问题制作的小吃:https: //snack.expo.io/BynlDr6-z

我在这做错了什么？

谢谢!