React.js-错误边界

Question

如果我完全理解ReactErrorBoundary的概念，我不太确定。我需要说的是，我实际上想开始使用ErrorBoundary，但我是第一次使用它。

所以我创建了一个ErrorBoundary组件：

import React, { Component } from "react";
import * as Data from '../../backend/data';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

componentDidCatch(error, stackTrace) {
this.setState({ hasError: true  });
console.log(error, stackTrace);
// Send error to backend
Data.trackError(error, stackTrace.componentStack, this.props.component, this.props.location, this.props.guestLandingPage?.identifier_token, this.props.user?.id);
}

render() {
if (this.state.hasError) {
return this.props.fallbackUI;
}

return this.props.children; 
}
}
export default ErrorBoundary;

现在我试着在我的app.container.js中使用它(我不会复制它的全部代码，只复制它的必要部分(：

...
import NavBarComponent from './components/navbar.component';
import ErrorBoundary from './components/error/error.component';
import FallbackUI from './components/error/standardFallback.component';
...
class App extends Component {
...
render() {
const View = this.importView();
return (
<ErrorBoundary
location={"builder"}
component={"app.container.js"}
user={this.props.user}
fallbackUI={<FallbackUI />}
>
<Wrap>
<NavBarComponent
key={"navBarComponent"}
/>
...
</Wrap>
...
</ErrorBoundary>
)
}
}

然后我开始手动创建一个错误。我在navbar.component.js中添加了一个不存在的变量，导致引发错误。

到目前为止效果不错。错误正在发送到后端，此时将显示我的回退UI组件。到目前为止，一切都很好。

然而，现在，我不想在顶层捕捉错误，而是在各个组件中捕捉错误，这样应用程序仍然可用，并且只有在出现错误时才会在各个组件显示错误消息。因此，我现在已经将ErrorBoundary组件移动到navbar.component.js(并将其从app.container.js中删除(。

class NavBarComponent extends Component {
...
render() {
return (
<ErrorBoundary
location={"builder"}
component={"navbar.component.js"}
user={this.props.user}
fallbackUI={<FallbackUI />}
>
<Nav className="navbar navbar-expand-lg navbar-light">
...
</Nav>
</ErrorBoundary>
);
}
}

期望得到相同的结果，但只在显示导航栏的地方显示我的回退UI组件。但实际上，结果是，当移动到导航栏时，ErrorBoundary根本没有被触发。为什么？难道不可能将ErrorBoundary组件添加到每个组件本身，从而只显示有错误的组件，而不显示整个应用程序吗？非常感谢您提前对此做出任何解释！

PS：我还想知道，为什么我不能在ErrorBoundary组件中同时使用getDerivedStateFromError和componentDidCatch方法。当在ErrorBoundary中定义getDerivedStateFromError方法时，从未调用方法componentDidCatch：

static getDerivedStateFromError(error) {
return { hasError: true };
}

但就我所见，仅使用componentDidCatch就可以很好地工作。

Answer 1

由于错误发生在navbar.component.js中，因此ErrorBoundary必须存在于其父层次结构中的某个位置。目前，您正在将其用作navbar.component.js的子级

将ErrorBoundary用法更新到下面应该可以像您对所期望的那样工作

class App extends Component {
...
render() {
const View = this.importView();
return (
<Wrap> 
<ErrorBoundary
location={"builder"}
component={"app.container.js"}
user={this.props.user}
fallbackUI={<FallbackUI />}
>
<NavBarComponent
key={"navBarComponent"}
/>
</ErrorBoundary>
...
</Wrap>
...

)
}
}

您也可以通过用ErrorBoundary包装组件来导出组件，这样您就不必在渲染组件的任何地方都这样做

export default ({location, user, ...props}) => {
return ( 
<ErrorBoundary
location={location}
component={"navbar.component.js"}
user={user}
fallbackUI={<FallbackUI />}
>
<NavBarComponent
key={"navBarComponent"}
{...props}
/>
</ErrorBoundary>
)
}

并像一样使用它

class App extends Component {
...
render() {
const View = this.importView();
return (
<Wrap>
<NavBarComponent
location={"builder"}
user={this.props.user}
key={"navBarComponent"}
/>
...
</Wrap>
)
}
}