React / 创建一个重置其子项的错误边界

Question

我正在尝试创建一个错误边界，该边界将显示一条 toast 消息，将错误记录到控制台并重置其子项。假设我有这段代码：

<ErrorBoundary>
  <ComponentThrowingAnError prop1="1" />
</ErrorBoundary>

因此，当ComponentThrowingAnError抛出错误时，我想ErrorBoundary捕获它，记录它并显示一条 toast 消息，然后<ComponentThrowingAnError />使用prop1="1". 我的重置/重新渲染的意思是，如果我的 ErrorBoundary 是这样实现的：

class ErrorBoundary extends React.Component {
  componentDidCatch(error: Error) {
    console.error(error);
    message.error("An error occured. Please check the console.");
  }

  render() {
    return this.props.children;
  }
}

它的子级仍然会被破坏，因此错误会被重新抛出，直到整个应用程序崩溃。相反，我想让错误边界丢弃其子级并重新渲染它们，以便将它们重置为<ComponentThrowingAnError prop1="1" />.

这可能吗还是有其他方法可以实现

• 捕获并记录错误
• 并将孩子们重置为初始状态/道具？

哦，我当然忘记了，当由于道具导致错误而抛出错误时，这当然仍然是一个问题，但我不想在这里解释这一点。我想捕捉孩子们内部发生的错误。

Answer 1

是的，你可以这样做：

class ErrorBoundary extends React.Component {
  state = { errorCount: 0 }

  componentDidCatch() {
    this.setState((state) => ({ errorCount: state.errorCount + 1 }))
  }

  render() {
    return (
      <React.Fragment key={this.state.errorCount}>
        {this.props.children}
      </React.Fragment>
    )
  }
}

更改“密钥”允许您重新安装组件。您仍然会在开发模式下看到开发错误叠加，发生这种情况时只需按“ESC”即可。