React で useEffect を使用してデータを取得する

React で useEffect を使用してデータを取得する

React では、関数コンポーネントで副作用を実行するために useEffect フックがよく使用されます。 API またはサーバーからのデータの取得は、最も一般的な副作用の 1 つであり、useEffect を使用すると、コンポーネントでのデータの取得を簡単に管理できます。以下は、useEffect を使用して React 関数コンポーネントでデータをフェッチする方法の詳細な説明と例です。

---

1.基本セットアップ

useEffect を使用してデータをフェッチするには、通常、次のパターンを使用します。

• コンポーネントがマウントまたは更新されるときに useEffect を使用してフェッチ リクエストをトリガーします。
• useState フックを使用して、フェッチしたデータをコンポーネントの状態に保存します。
• ユーザー エクスペリエンスを向上させるために、読み込み状態とエラー状態を処理します。

---

2. useEffectを使用したデータの取得例

useEffect と useState を使用して API からデータをフェッチする方法を示す例を次に示します。

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

---

3.コードの内訳:

• 状態変数:

  • data: 取得したデータが正常に取得されたら、それを保存します。
  • 読み込み中: データがまだフェッチされているかどうかを追跡するブール値の状態。
  • error: フェッチプロセス中に発生したエラーメッセージを保存します。

• useEffect フック:

  • useEffect フック内で 非同期 関数 fetchData を定義します。
  • fetchData は、依存関係配列 [] が空であるため、コンポーネントがマウントされるとすぐに呼び出されます。
  • fetchData 内で、fetch() メソッドを使用して API 呼び出しを行います。データを取得した後、エラー (200 以外の応答など) がないかチェックし、それに応じて状態を更新します。

• ロードとエラー処理:

  • コンポーネントは、フェッチリクエストの進行中に最初に「読み込み中...」メッセージを表示します。
  • 取得中にエラーが発生した場合は、エラー メッセージが表示されます。
  • データが正常に取得されると、リストに表示されます。

---

4.覚えておくべき重要なポイント:

• 使用中の非同期関数Effect:

  • useEffect 自体を非同期としてマークすることはできませんが、エフェクト内で非同期関数を定義して呼び出すことができます。

• 空の依存関係配列 ([]):

  • 依存関係配列が空の場合、エフェクトは最初のレンダリング後に 1 回だけ実行され、クラス コンポーネントのcomponentDidMount の動作を模倣します。

• エラー処理:

  • フェッチが失敗したときにアプリケーションがクラッシュしたり予期せぬ動作をしないようにエラーを処理することが重要です。

• 状態管理:

  • 読み込み、データ、エラー状態の管理に useState を使用すると、それに応じて UI の管理と表示が容易になります。

---

5.データ取得のための useEffect の一般的なパターン

ボタンクリック時にデータを取得する (手動でエフェクトをトリガー)

場合によっては、コンポーネントのマウント時にデータをフェッチするのではなく、ボタンのクリックなどのユーザー操作に基づいてデータをフェッチしたい場合があります。この場合、イベント ハンドラーから状態変数を更新することで useEffect をトリガーできます。

import React, { useState, useEffect } from 'react';

const DataFetchingComponent = () => {
  // State variables to store data, loading status, and errors
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using useEffect to fetch data
  useEffect(() => {
    // Define the function for fetching data
    const fetchData = async () => {
      try {
        // Start by setting loading state to true
        setLoading(true);

        // Make the fetch request
        const response = await fetch('https://api.example.com/data');

        // Check if the response is ok (status code 200-299)
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }

        // Parse the JSON data
        const result = await response.json();

        // Update the state with the fetched data
        setData(result);
      } catch (error) {
        // Handle errors and set the error state
        setError(error.message);
      } finally {
        // Set loading to false once the request is complete
        setLoading(false);
      }
    };

    // Call the fetchData function
    fetchData();
  }, []); // Empty dependency array means this effect runs once when the component mounts

  // Conditionally render the UI based on loading, error, and data
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data Fetching Example</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetchingComponent;

この例では:

• データはボタンをクリックした後にのみ取得されます (setFetchDataFlag(true))。
• useEffect は fetchDataFlag 状態の変更をリッスンし、更新されたときにフェッチをトリガーします。

---

6.結論

React でデータを取得するために useEffect を使用することは、副作用を管理する効率的でクリーンな方法です。 useState と組み合わせることで、機能コンポーネントでのデータのフェッチ、状態のロード、およびエラー処理を管理できます。アプリが優れたユーザー エクスペリエンスを提供できるように、常にエラーや特殊なケースに対処することを忘れないでください。

以上がReact で useEffect を使用してデータを取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。