2

React.lazy() 機能について質問があります。機能を開発していますが、ある時点で立ち往生しています。

私のシナリオ

私は私がいる場所にセットアップを持っています

  1. React.lazy() を使用して一連のコンポーネントを遅延してロードする
  2. サスペンスの上にエラー境界ラッパーを配置します。
  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. コンポーネント内でエラーが発生した場合 (null ポインター エラーなど)、フォールバック UI を表示する必要があります。
  2. コンポーネントの遅延読み込み中に React.lazy() エラーが発生したためにエラーが発生した場合 (つまり、チャンク読み込みの失敗、またはネットワーク エラー)、フォールバック UI を表示すべきではありません。

問題

今のところ、React の遅延読み込み中にスローされたエラーとコンポーネントのランタイム エラーを区別する手段が見つかりません。私が望むものを達成する方法はありますか?

私は複数のエラー境界を使用することにオープンですが、マウント時に両方のエラーがスローされるため、私が望むものを達成することはできません. どんな助けでも大歓迎です。ありがとう ！。

4

2 に答える 2

0

React のError Boundary docsから実際の例を確認してください。

componentStackon プロパティを使用しerrorInfoて、エラーの発生場所を特定し、それに基づいてフォールバック UI を条件付きで表示できるようにする必要があります。

于 2022-01-27T17:34:46.600 に答える