Reactでの「Can't perform a React state update on an unmounted component」エラーの解決方法

このエラーの主な原因は、非同期処理によるものです。例えば、非同期のデータの取得やAPI呼び出しが行われた後に、コンポーネントがアンマウントされてしまうと、状態の更新ができなくなり、エラーが発生します。

このエラーを解決するためには、以下の方法を試すことができます。

コンポーネントのアンマウントを監視する: コンポーネントがアンマウントされるタイミングを監視し、アンマウント後に状態の更新を行わないようにします。一般的な方法として、useEffectフックのクリーンアップ関数を使用することができます。

useEffect(() => {
  // 非同期処理や副作用の実行
  return () => {
    // コンポーネントがアンマウントされた後のクリーンアップ
    // 状態の更新を行わない
  };
}, []);

状態の更新前にアンマウントをチェックする: 状態の更新を行う前に、コンポーネントがまだマウントされているかどうかを確認します。これには、参照を使用することができます。

const isMounted = useRef(true);
useEffect(() => {
  return () => {
    isMounted.current = false;
  };
}, []);
// 状態の更新前にアンマウントをチェック
if (isMounted.current) {
  // 状態の更新
}

これらの方法を使用することで、「Can't perform a React state update on an unmounted component」エラーを解決することができます。