ReactのuseEffectフックを使用したデータの取得方法

useEffectフックを使用した基本的なデータの取得方法:

import React, { useEffect, useState } from 'react';
function MyComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

上記の例では、コンポーネントがマウントされた時に一度だけデータを取得します。useEffectの第2引数に空の配列[]を渡すことで、依存関係がないために一度だけ実行されるようになります。取得したデータは、setData関数を使って状態として管理し、表示します。

パラメータに依存するデータの取得方法:

import React, { useEffect, useState } from 'react';
function MyComponent({ userId }) {
  const [userData, setUserData] = useState(null);
  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const jsonData = await response.json();
        setUserData(jsonData);
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    };
    fetchUserData();
  }, [userId]);
  return (
    <div>
      {userData ? (
        <div>
          <h1>{userData.name}</h1>
          <p>{userData.email}</p>
        </div>
      ) : (
        <p>Loading user data...</p>
      )}
    </div>
  );
}

上記の例では、userIdというパラメータに依存してデータを取得します。useEffectの第2引数に[userId]を渡すことで、userIdの値が変更されたときにのみ再度データを取得するようになります。

これらはReactの基本的なデータ取得の方法の一部です。実際のアプリケーションでは、状態の更新やエラーハンドリングなどを適切に行う必要があります。また、ライブラリやフレームワークによっても異なる方法があるため、詳細な説明については公式ドキュメントを参照することをおすすめします。