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

アンマウントされたコンポーネントで React State Update を実行できない

問題

の場合React を使用すると、「React 状態の更新を実行できません」というエラー メッセージが表示される場合があります。コンポーネントがマウントされていません。」このエラーは通常、DOM からアンマウントされたコンポーネントの状態を更新しようとしたときに発生します。

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

スタック トレースから、コール スタックをトレースバックして、アンマウントされた後に setState(...) を呼び出したコンポーネントを見つけることで、エラーの原因となっているコンポーネントを特定できます。問題のあるコンポーネントは、componentName.prototype.setState としてスタック トレースにリストされます。

問題の解決

このエラーを解決するには、いくつかの方法があります。 :

1. 非同期タスクのキャンセル:コンポーネント内で実行中のフェッチやタイムアウトなどの非同期タスクがある場合は、componentWillUnmount メソッドでそれらのタスクをキャンセルします。これらのタスクは、コンポーネントがアンマウントされた後も実行し続けることができるため、アンマウントされたコンポーネントで状態の更新が発生します。
2. 状態の更新をガード: 状態の更新を条件付きチェックでラップし、コンポーネントがマウントされていないことを確認します。状態を更新する前はまだマウントされています。例:

if (this.isMounted) {
  this.setState({ ... });
}

3. React フックを使用する: React フックを使用している場合は、useEffect フックのクリーンアップ関数を使用して非同期をキャンセルできます。タスクを実行し、マウント フラグを切り替えます。これにより、状態の更新がコンポーネントのマウント中にのみ行われるようになります。

例 (React Hooks)

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    try {
      const data = await fetch('...');
      if (isMounted) setState(data);
    } catch (error) {
      console.error(error);
    }
  };
  fetchData();
  return () => { isMounted = false; };
}, []);

これらのアプローチのいずれかを実装すると、 「マウントされていないコンポーネントでは React 状態の更新を実行できません」エラーを防止し、状態管理がコンポーネントの状態と一貫していることを確認できます。ライフサイクル。

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