ReactでAPIからデータを取得する方法

Reactを使ったWebアプリケーションでは、APIからデータを取得することが非常に重要です。この記事では、ReactでAPIからデータを取得する方法について説明します。

APIからデータを取得する方法

Reactでは、fetch APIを使ってサーバーからデータを取得することができます。fetch APIはPromiseを返すので、非同期でデータを取得することができます。

fetch('https://example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))

この例では、fetchメソッドでhttps://example.com/dataからデータを取得し、レスポンスをJSONに変換してコンソールに出力しています。

ReactでAPIからデータを取得する

Reactでは、fetch APIを使ってAPIからデータを取得することができます。通常、APIから取得したデータは、コンポーネントのstateやpropsに保存され、レンダリングに使用されます。

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

function App() {
  const [data, setData] = useState([]);

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

この例では、useStateフックを使ってdataステートを定義し、useEffectフックを使ってコンポーネントがマウントされた時にAPIからデータを取得してdataステートを更新しています。取得したデータは、dataステートをマップして表示されます。

まとめ

ReactでAPIからデータを取得するには、fetch APIを使います。APIから取得したデータは、通常、コンポーネントのstateやpropsに保存され、レンダリングに使用されます。APIからデータを取得するときは、非同期で取得する必要があるため、Promiseを返すfetchメソッドを使用することが重要です。