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

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

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

• 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 サイトの他の関連記事を参照してください。