2

我对 React.lazy() 功能有疑问。我正在开发一个功能，但我被困在了一个点上。

我的场景

我在哪里有一个设置

  1. 使用 React.lazy() 懒惰地加载一堆组件
  2. 在 Suspense 上方有一个错误边界包装器。
  3. 有一个错误回退 ui 组件 ( ErrorFallbackToast) 以在出现错误时显示。

看起来像这样的东西（模拟）

import React, { Suspense, useEffect, lazy } from 'react';

const Toast = React.lazy(() => import('../Toast'));

const MyComponent = () => {
  const renderComponent = () => {
    switch (type) {
      case TYPE.toast:
        return <Toast />;
      default:
        return null;
    }
  };

  return (
    <ErrorBoundary fallback={ErrorFallbackToast} onError={() => {}}>
      <Suspense fallback={<></>}>{renderComponent()}</Suspense>
    </ErrorBoundary>
  );
};

export default MyComponent;

我有一个场景，需要为特定类型的错误显示回退 ui，而不应为其他错误显示。例如

  1. 如果组件内发生任何错误（可能是空指针错误或其他），我需要显示回退 ui。
  2. 如果在延迟加载组件期间由于任何 React.lazy() 错误而发生任何错误（即块加载失败或网络错误），我不应该显示 fallbackUI。

问题

到目前为止，我还没有找到任何方法来区分 React 延迟加载期间引发的错误与组件运行时错误。有什么方法可以实现我想要的吗？

我愿意使用多个错误边界，但由于这两个错误都是在安装时抛出的，所以我无法实现我想要的任何东西。任何帮助，将不胜感激。谢谢 ！。

4

2 回答 2

0

查看React 的错误边界文档中的实时示例。

您应该能够使用componentStackon 属性errorInfo来确定错误的来源，并基于此有条件地显示回退 UI。

于 2022-01-27T17:34:46.600 回答
0

你可以用 ErrorBoundary 包装你的 Toast 惰性组件我认为你需要为那个组件显示一个后备，这就像一个“空的 try/catch”，所以在这种情况下你的 renderComponent() 中的后备将严格在外面懒惰的错误

于 2022-01-31T15:46:03.927 回答