React JS の API からデータを取得して表示するためのガイド

公開: 2024-10-01

API からデータを取得して表示することは、最新の React アプリケーションの基本的なタスクです。 React の進化により、データの取得がより合理化され、HTTP リクエストを行うための複数の方法が提供されています。このガイドでは、React を使用してデータを取得して表示する手順について説明します。

目次

トグル

React プロジェクトのセットアップ

API の取得に入る前に、React プロジェクトがセットアップされていることを確認してください。次を使用して作成できます

  • npx create-react-app my-app
    cd my-app
    npm start

これにより、新しい React プロジェクトが初期化され、開発サーバーが実行されます。

️ ステップバイステップ: React でデータを取得する

1.データを保存するためのステートを作成する

useStateフックを使用して、フェッチしたデータを保存するための状態変数を作成します。

JavaScript

  • const [data, setData] = useState([]);

2. useEffectでAPIデータを取得する

React のuseEffectフックにより、コンポーネントのマウント時にデータのフェッチが確実に行われます。 fetch()関数は、API からデータを取得するために使用されます。

JavaScript

  • useEffect(() => {
    fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data))
    .catch(error => console.error('Error:', error));
    }, []);

3.取得したデータを表示する

データがフェッチされたら、 map()メソッドを使用して JSX でレンダリングできます。

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

️ データの取得に Axios を使用する

fetch()はネイティブ ブラウザ API ですが、多くの開発者は、そのシンプルさと強力な機能により、 Axiosのようなライブラリを使用することを好みます。 Axios の使用例を次に示します。

Axios をインストールします。

  • npm install axios

データの取得

  • useEffect(() => {
    axios.get('https://api.example.com/data')
    .then(response => setData(response.data))
    .catch(error => console.error('Error:', error));
    }, []);

‍ エッジケースの処理

  • 読み込み状態: データのフェッチ中に読み込み状態を管理することが重要です。
  • エラー処理: 適切なエラー処理を実装すると、ユーザー エクスペリエンスが向上します。

例：

const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

結論

React で API からデータを取得して表示することは、動的な Web アプリケーションを作成するために不可欠です。 fetch() API を使用する場合でも、Axios などのライブラリを使用する場合でも、プロセスには、データを保存する状態の定義、リクエストの作成、結果のレンダリングが含まれます。これらの手順を理解し、読み込みやエラーなどのエッジ ケースに対処することで、応答性の高いデータ駆動型アプリを効率的に構築できます。

よくある質問

1. API データの取得を開始するには、どうすれば React プロジェクトをセットアップできますか?

React プロジェクトを設定するには、次のコマンドを実行します。

npx create-react-app my -app
cd my -app
npm start

これによりプロジェクトが初期化され、開発サーバーが起動します。

2.フェッチしたデータを React に保存するにはどうすればよいですか?

useStateフックを使用して、フェッチしたデータを保存できます。例：

const [data, setData] = useState ([]);

3.コンポーネントのマウント時に React でデータを取得するにはどうすればよいですか?

コンポーネントのマウント時にuseEffectフックを使用してデータをフェッチします。

useEffect ( () => {
fetch ( 'https://api.example.com/data' )
. then ( response => response. json ())
. then ( data => setData (data))
. catch ( error => console . error ( 'Error:' , error));
}, []);

4.データをレンダリングするときに React で map() メソッドを使用する目的は何ですか?

map()メソッドは、フェッチされたデータ配列をループし、JSX 内の各項目をレンダリングするために使用されます。例えば：

<ul>
{data. map ( item => (
< li key = {item.id} > {item.name} </ li >
))}
</ul>

5.フェッチ API の代わりに Axios を使用するのはなぜですか?

多くの開発者は、HTTP リクエストを簡素化し、より多くの機能を提供し、古いブラウザをより一貫してサポートするため、Axios を好みます。

6. React プロジェクトに Axios をインストールするにはどうすればよいですか?

Axios をインストールするには、次を実行します。

npm install axios

7. React で Axios を使用してデータをフェッチするにはどうすればよいですか?

Axios を使用すると、次のようなデータをフェッチできます。

useEffect ( () => {
axios. get ( 'https://api.example.com/data' )
. then ( response => setData (response. data ))
. catch ( error => console . error ( 'Error:' , error));
}, []);

8. React でデータをフェッチするときにロード状態を処理するにはどうすればよいですか?

useStateを使用してloading変数を作成することで、読み込み状態を管理できます。例えば：

const [loading, setLoading] = useState ( true );

useEffect ( () => {
フェッチ( 'https://api.example.com/data' )
。 then (応答=>応答.json ())
。次に(データ=> {
setData (データ);
setLoading ( false );
});
}、[]);

9.データをフェッチするときにエラーを処理するにはどうすればよいですか?

エラーを処理するには、 error状態を定義し、リクエストが失敗した場合に備えて更新します。

const [error, setError] = useState ( null );

useEffect ( () => {
フェッチ( 'https://api.example.com/data' )
。 catch (エラー=> {
setError (エラー);
setLoading ( false );
});
}、[]);

10. API フェッチ時のロードやエラーなどのエッジケースを処理することが重要なのはなぜですか?

読み込みやエラーなどのエッジケースを処理することで、データ取得の現在の状態がユーザーに確実に通知され、データの取得が失敗したり時間がかかったりした場合でも、よりスムーズなユーザー エクスペリエンスが提供されます。