Question

我将主要组件包裹成这样：

class App extends React.Component {
  render() {
    return (
      <div>
        <ErrorBoundary>
          <Home />
        </ErrorBoundary>
      </div>
    );
  }
}

只是想知道componentDidCatch会捕获哪种错误？不会捕获编译错误，并且当我在子组件中从更改该错误时

this.props.users.people.length到this.props.users.userslength应该显示我的加载微调器的年龄（在我的子组件中有一个三元运算符，不确定是否会影响它）

只是想知道它会捕获哪种错误，以及我如何伪造浏览器才能看到它的正常运行？

Answer 1

错误边界是React组件，可在其子组件树中的任何位置捕获JavaScript错误，记录这些错误，并显示后备UI，而不是崩溃的组件树。错误边界会在渲染期间，生命周期方法以及它们下面的整个树的构造函数中捕获错误。

请确保检查子组件是否存在错误，并且这些错误是在渲染期间而不是在事件处理程序或某些其他异步代码内部引起的。对于该代码，您仍然可以自由使用常规的try/catch。

请仔细阅读官方网站上有关Error Boundaries的文章

Answer 2

错误边界是React组件，可在其子组件树中的任何位置捕获JavaScript错误，记录这些错误并显示后备UI，而不是崩溃的组件树。

因此，它基本上就像javascript的.catch()一样工作，只是它在呈现组件时会捕获错误，并且它本身无法捕获错误。

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

查看他们的演示。

https://codepen.io/gaearon/pen/wqvxGa?editors=0010

componentdidcatch捕获哪种错误

2 个答案: