ReactでFetch APIとuseEffectを使用する方法

以下に、Fetch APIとuseEffectを組み合わせて使用する方法を示します。

まず、Reactコンポーネント内でFetch APIを使用するために、Fetchリクエストを行う関数を作成します。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
    // データの処理や状態の更新を行うことができます
  } catch (error) {
    console.log('エラーが発生しました:', error);
  }
}

次に、useEffectフックを使用して、コンポーネントのマウント時や特定の状態の変更時にFetchリクエストを実行します。

import React, { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    fetchData();
  }, []); // 空の配列を渡すことで、マウント時にのみ実行されるようにします
  return (
    <div>
      {/* コンポーネントの表示 */}
    </div>
  );
}

このコードでは、コンポーネントがマウントされたときに一度だけFetchリクエストが実行されます。必要に応じて、useEffectの依存配列を使用して、特定の状態の変更時にもFetchリクエストを実行することができます。