序文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 データベース内の同じテーブルを同時にクエリして更新する方法
dockerでイメージを削除するコマンドはdocker rmiですが、このコマンドを実行してもイメー...
必要:公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...
Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...
任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...
目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...
Centos7では、/etc/rc.d/rc.localファイルの権限が削減されており、実行権限があ...
序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...
質問: 360ブラウザの互換モードなど、一部のブラウザでは、 <td style="...
1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...
01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...
序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...
冒頭に書いた以前、Renren で JS ベースのスクリーンショット ソリューションについて説明した...
純粋な CSS を使用して、マウスが行の上を通過するときに行の背景色を変更し、その行にフォーカスがあ...
序文早速本題に入りましょう。これからお話しするのは次のマインドマップです。まずは印象をつかんでくださ...
序文当社の MySQL オンライン環境のほとんどはバージョン 5.7.18 を使用しています。このバ...