ホームページ > ウェブフロントエンド > jsチュートリアル > 「マウントされていないコンポーネントでは React 状態の更新を実行できません」エラーを修正する方法?

「マウントされていないコンポーネントでは React 状態の更新を実行できません」エラーを修正する方法?

Mary-Kate Olsen
リリース: 2024-12-04 08:51:15
オリジナル
854 人が閲覧しました

How to Fix

問題のあるコンポーネントの特定

ブラウザ コンソールに表示されるスタック トレースは、状態更新違反の原因となっているコンポーネントを示します。スタック トレースの各行は関数呼び出しを表し、括弧内にコンポーネント名またはクラス コンストラクターが示されています。

  • in TextLayerInternal (Context.Consumer によって作成)
  • in TextLayer ( PageInternal によって作成されました)

これは、TextLayer コンポーネントが次のことを試みていることを示しています。アンマウントされた後に状態を更新します。

状態更新エラーの解決

問題を解決するには、すべての非同期操作がキャンセルされる前にキャンセルまたは完了していることを確認する必要があります。コンポーネントはcomponentWillUnmountでアンマウントされます。あなたの場合、これには調整可能な関数 setDivSizeThrottleable の処理が含まれます。

改訂されたコード

改訂された Book コンポーネントでは、次の変更を加えました:

  • を使用して setDivSizeThrottleable をキャンセル可能な関数に変換しましたthrottle.cancel().
  • 調整可能な関数をキャンセルするためのクリーンアップ関数がコンポーネントWillUnmount に追加されました。
class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  ...

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };
ログイン後にコピー

調整可能な関数のキャンセルを適切に処理することで、状態更新違反を修正し、「アンマウントされたコンポーネントで React 状態更新を実行できません」エラーを解決します。

以上が「マウントされていないコンポーネントでは React 状態の更新を実行できません」エラーを修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート