Question

我尝试了ReactJS 16的新ErrorBoundary功能。我试图用它来捕获某些组件呈现的未定义变量。这导致我的整个应用程序表现得很奇怪。我试图封装未定义变量的副作用，以便组件优雅地分解。我在这里定义了ErrorBoundary组件 -

import React, { Component } from "react";

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
  }

  render() {
    if (this.state.hasError) {
      return <div></div>;
    }else{
      return <div>{this.props.children}</div>;
    }
  }
}

export default ErrorBoundary;

我正确导入了ErrorBoundary。它位于我的容器组件的render函数中并包装一个子组件，如下所示：

<ErrorBoundary>
  <MyComponent
    data={data}
    showData={this.state.showData}
    toggle={this.toggle}/>
</ErrorBoundary>

为了测试破解的应用程序功能，我将一个未定义的变量放入渲染函数

<ErrorBoundary>
  {brokenVar}
</ErrorBoundary>

当具有ErrorBoundary并包含未定义变量的组件被渲染时，这会在浏览器中发生。我的应用程序的其余部分停止正常工作。

Uncaught ReferenceError: brokenVar is not defined
    at WrappedComponent.render (main.bundle.ae5f4b25250d970680ca.js:sourcemap:52285)
    at WrappedComponent.render (main.bundle.ae5f4b25250d970680ca.js:sourcemap:44248)
    at main.bundle.ae5f4b25250d970680ca.js:sourcemap:32355
    at measureLifeCyclePerf (main.bundle.ae5f4b25250d970680ca.js:sourcemap:31635)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32354)
    at ReactCompositeComponentWrapper._renderValidatedComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32381)
    at ReactCompositeComponentWrapper._updateRenderedComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32305)
    at ReactCompositeComponentWrapper._performComponentUpdate (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32283)
    at ReactCompositeComponentWrapper.updateComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32204)
    at ReactCompositeComponentWrapper.receiveComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32106)

我是否有语法错误，或者这不是ErrorBoundaries的行为方式？

Answer 1

未定义的变量是编译时错误，将在编译应用程序时显示。

根据React blog

错误边界在渲染期间，生命周期方法以及它们下面的整个树的构造函数中捕获错误。

因此错误边界将捕获运行时错误，这在编译期间无法处理。尝试抛出错误，就像在博客中提供的示例中一样，来测试ErrorBoundary组件。

ReactJS ErrorBoundary没有捕获未定义的变量

1 个答案: