「マウントされていないコンポーネントでは React 状態の更新を実行できません」というエラーが表示されるのはなぜですか?それを修正するにはどうすればよいですか?

「マウントされていないコンポーネントでは React 状態の更新を実行できません」エラーについて

このエラーは、React が次のコンポーネントの状態を更新しようとすると発生します。すでに DOM からアンマウントされています。 React は、各コンポーネントの内部フラグを維持し、コンポーネントが現在マウントされているかどうかを示します。コンポーネントがアンマウントされた後に更新がトリガーされた場合、React は潜在的なメモリ リークやその他の予期しない動作を防ぐためにこのエラーを発生させます。

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

エラー メッセージには、問題のあるコンポーネントと、状態の更新に関与するイベント ハンドラーまたはライフサイクル フックを特定するのに役立つ情報が含まれています。スタック トレースで「component」値を探します。この値にはコンポーネントの名前が含まれているはずです。さらに、更新をトリガーした特定のイベント ハンドラーまたはライフサイクル フックは、多くの場合、関数名またはコード内の周囲のコンテキストから推測できます。

問題の解決

問題を解決するには、次の手順を実行します。コンポーネントがまだマウントされている間にのみ状態の更新が実行されるようにする必要があります。これにアプローチする方法は次のとおりです:

• isMounted フラグを確認します: クラスベースのコンポーネントでは、componentWillUnmount で false に設定されるブール値の isMounted フラグを作成できます。状態の更新を実行する前に、isMounted が true かどうかをチェックして、コンポーネントがまだレンダリングされていることを確認します。

  class Component extends React.Component {
    componentWillUnmount() {
      this.isMounted = false;
    }
  
    someMethod() {
      if (this.isMounted) {
        this.setState({ ... });
      }
    }
  }

• 条件付きレンダリングを使用する: 機能コンポーネントでは、次のことができます。条件付きレンダリングを使用して、コンポーネントがアンマウントされたときにコンポーネントがレンダリングされないようにします。 isMounted フラグを含む依存関係配列を使用して、状態の更新を useEffect フックでラップします。

  const Component = props => {
    const [isMounted, setIsMounted] = React.useState(true);
  
    useEffect(() => {
      return () => setIsMounted(false);
    }, []);
  
    if (!isMounted) return null;
  
    // State updates here...
  };

• 非同期関数のキャンセル: 状態の更新がトリガーされた場合setTimeout や fetch などの非同期操作では、componentWillUnmount ライフサイクル フックまたはクリーンアップ関数で操作をキャンセルすることを忘れないでください。 useEffect フック。これにより、コンポーネントがアンマウントされた後に状態が更新されるのを防ぎます。

  class Component extends React.Component {
    componentWillUnmount() {
      clearTimeout(this.timeoutId);
    }
  
    componentDidMount() {
      this.timeoutId = setTimeout(() => {
        this.setState({ ... });
      }, 1000);
    }
  }

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