reactjs - 当子组件失败时，React 错误边界没有捕获错误

Question

我需要创建一个必须包含图标选择器组件的 UI。通过研究，我发现没有足够的选项可用于此目的，但其中一个最能满足我要求的是React FontIconPicker。

在进行了一些更改以使其按预期工作后，我意识到我正面临一个意外的异常类型错误，这导致我的应用程序非常难看。

显示的错误看起来是这样的，并且当在组件上执行某种滚动定位组合时发生（有点难以实现，但假设正在发生）：

由于此问题仅偶尔发生一次，并且没有太多可用于选择图标的选项，因此我决定使用https://www.npmjs.com/package/react-error-上提供的 NPM 包来包含错误边界组件边界。

但是，按照文档所述，在导入和使用组件后，问题仍然存在，并且在 IconPicker 组件引发错误后一直导致我的整个应用程序失败。我可以确定那里正在发生这种情况，因为问题的根源来自模块的路径。

我的源代码是这样的：

<Field name="icon" required>
  {({ input, meta }) => (
    <Grid item xs={12}>
      <ErrorBoundary
        FallbackComponent={ErrorFallback}
        onError={iconPickerErrorHandler}
      >
        <IconPicker {...input} />
      </ErrorBoundary>
    </Grid>
  )}
</Field>

我正在使用React Final Forms并且FallbackComponent和onError仍然具有非常通用的值。

我究竟做错了什么？这种错误是错误边界的概念假装解决的还是我很困惑？

标签： reactjserror-boundaries