序文React 16から、子コンポーネントで発生したエラーを捕捉し、エラーログを記録し、ダウングレードコンテンツを表示できるエラー境界の概念が導入されました。具体的な公式ウェブサイトのアドレスは エラー境界は、コンポーネント エラーによってページ全体が使用不能になり、画面が空白になるのを防ぎます。エラー境界は、グレースフル デグラデーションを使用して代替 UI を提示します。エラー境界は、レンダリング中、ライフサイクル中、およびコンポーネント ツリー全体のコンストラクター内でエラーをキャプチャできます。 React 16 以降では、エラー境界でキャッチされないエラーが発生すると、React コンポーネント ツリー全体がアンマウントされます。 エラー境界の意味
ページを閲覧しているときに、バックエンドから返される例外やフロントエンドでのエラーチェックが原因で、ユーザーエクスペリエンスが悪くなることがあります。妻と一緒に電車に座って鍋を食べながら歌を歌っている 公式サイトの実装方法👉 クラス コンポーネントが 2 つのライフサイクル メソッド static getDerivedStateFromError() または componentDidCatch() のいずれか (または両方) を定義すると、エラー境界になります。エラーがスローされたら、static getDerivedStateFromError() を使用して代替 UI をレンダリングし、componentDidCatch() を使用してエラー メッセージを出力します 👈 ErrorBoundaryクラスはReact.Componentを拡張します。 コンストラクタ(props) { スーパー(小道具); this.state = {hasError: false }; } 静的 getDerivedStateFromError(エラー) { // 次のレンダリングで劣化した UI を表示できるように状態を更新します {hasError: true } を返します。 } コンポーネントDidCatch(エラー、エラー情報) { // エラー ログをサーバーに報告することもできます logErrorToMyService(error, errorInfo); } 与える() { if (this.state.hasError) { // ダウングレードされた UI をカスタマイズしてレンダリングできます。 return <h1>Something went wrong.</h1>; } this.props.children を返します。 } } その後、通常のコンポーネントとして使用できます。 <エラー境界> <マイウィジェット /> </エラー境界> エラー境界は JavaScript の 設定可能なErrorBoundaryをカプセル化します公式サイトがエラー境界コンポーネントをどのように実装しているかを理解した後、 1. 設定可能なErrorBoundaryクラスコンポーネントを作成する公式サイトの
ErrorBoundaryクラスはReact.Componentを拡張します。 状態 = { エラー: false }; 静的 getDerivedStateFromError(エラー) { {エラー}を返します。 } コンポーネントDidCatch(エラー、エラー情報) { エラーが発生した場合 // レポート ログは、親コンポーネントによって挿入された関数を通じて実行されます。this.props.onError(error, errorInfo.componentStack); } } 与える() { const { フォールバック、 FallbackComponent } = this.props; const { error } = this.state; if (エラー) { const fallbackProps = {エラー}; //React要素かどうかを判定する React.isValidElement(フォールバック)の場合{ フォールバックを返します。 } //コンポーネントメソッド if (FallbackComponent) { <FallbackComponent {...fallbackProps} /> を返します。 } throw new Error("ErrorBoundary コンポーネントをフォールバック UI に渡す必要があります"); } this.props.children を返します。 } } この方法では、基盤となる 1. ErrorBoundary に、挿入されたリセット メソッドがあるかどうかを検出するメソッドを追加します。リセット メソッドがある場合は、それを実行し、エラー状態をリセットしてエラー状態を false にします。リセットエラー境界 = () => { this.props.onReset() の場合、 this.props.onReset() になります。 this.setState({ エラー: false }); }; 2. レンダリング用に render に関数コンポーネント タイプを追加します。リセット メソッドとエラー情報は、処理のために現在のコンポーネントにパラメータとして渡すことができます。与える() { const { fallback、 FallbackComponent、 fallbackRender } = this.props; const { error } = this.state; if (エラー) { const フォールバックプロパティ = { エラー、 リセットエラー境界: this.resetErrorBoundary、 }; ... fallbackRender の typeof === "function") の場合は fallbackRender(fallbackProps) を返します。 ... } this.props.children を返します。 } 2. ErrorBoundaryを高階関数でラップして返す「react」からReactをインポートします。 「./core」からDefaultErrorBoundaryをインポートします。 const catchreacterror = (境界 = DefaultErrorBoundary) => 内部コンポーネント => { プロパティを返す => ( <境界 {...props}> <InnerComponent {...props} /> </境界> ); }; 使用とテストクリックして増加するデモでは、数値が特定の値に達すると例外がスローされます。ここでは、クラス コンポーネントと Function コンポーネントが例外を開始するコンポーネントとしてテストされます。
//関数コンポーネント const fnCount1 = ({ count }) => { if (count == 3) throw new Error("count is three"); <span>{count}</span> を返します。 }; //クラスコンポーネント class fnCount2 extends React.Component { 与える() { const { count } = this.props; if (count == 2) throw new Error("count is two"); <span>{count}</span> を返します。 } }
const errorbackfn = ({ エラー: { メッセージ }, resetErrorBoundary }) => ( <div> <p>問題が発生しました</p> <pre>{メッセージ}</pre> <button onClick={resetErrorBoundary}>もう一度お試しください</button> </div> );
const errorbackcom = () => <h1>エラーが発生しました。元に戻すことはできません</h1>;
//例外を開始したコンポーネントをラップし、エラー編集を処理できる高階コンポーネントを返します。const SafeCount1 = catchreacterror()(fnCount1); const SafeCount2 = catchreacterror()(fnCount2); //メインコンポーネントをテストする const App = () => { 定数[count, setCount] = useState(0); const ListenError = (arg, info) => console.log("Error: " + arg.message, info); //エラーが発生したときのコールバック const onReset = () => setCount(0); //リセットがクリックされたときのコールバック return ( <div className="アプリ"> <セクション> <button onClick={() => setCount(count => count + 1)}>+</button> <button onClick={() => setCount(count => count - 1)}>-</button> </セクション> <時間 /> <div> クラスコンポーネント: <セーフカウント2 カウント={count} フォールバックレンダリング={errorbackfn} onReset={onReset} onError={ListenError} /> </div> <div> 機能コンポーネント: <セーフカウント1 カウント={count} フォールバックコンポーネント={errorbackcom} onError={ListenError} /> </div> </div> ); }; ミッション完了! 発生した問題とその概要反応エラー境界が万能ではない場合が多々あります。例えば、
上記の例では、this.o が存在しないため、エラーが報告されます。Window.onerror はこれをキャプチャできますが、エラー境界はキャプチャできません。
サーバーサイドレンダリングとエラー境界自体 要約する
ここまで、この記事を読んでいただきありがとうございます。お役に立てれば幸いです。React のエラー境界について大まかに理解し、簡単な 以下もご興味があるかもしれません:
|
<<: MySQL 8.0.3 RCがリリースされようとしています。変更点を見てみましょう。
>>: MySQL データベース内の同じテーブルを同時にクエリして更新する方法
本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...
序文:一部のアプリケーション シナリオでは、成績や年齢によるランキングなど、ランキングの問題が発生す...
コンセプト紹介: 1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画...
現在、プロジェクトを作成しました。インターフェースは次のとおりです。これはフレームセットを使用して行...
Vue+iview メニューとタブのリンク現在、vue+iview を使用してバックエンド管理システ...
MySQL と接続関連のタイムアウト序文:今日、同僚から、データ量が多いときに MySQL データベ...
目次MySQL マスター スレーブ レプリケーション環境を設定する場合、マスター データベースとスレ...
開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...
SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...
目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...
必要な項目をループして検証するために、クエリ フォームのいくつかのプロパティを実装したいと考えていま...
背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...
1. 入力・貼り付けできるのは中国語のみ<input onkeyup="value=...
1.1 iptablesファイアウォールの概要Netfilter/Iptables (以下、Ipta...