【IT】ReactでのJSONデータの表示（JSONPlaceholder）

皆さま
こんにちは

今日は、ReactでJSONデータを表示します。
データは、「JSONPlaceholder」を使用します。

今回の内容

１．プロジェクト準備（下準備含む）
２．プログラム実装
３．動作確認

１．プロジェクト準備（下準備含む）

前回の下準備を参考に
「npx create-react-app my-test-json001」で
プロジェクトを作成し、不要ファイル削除しクリーンアップします。

２．プログラムを実装します。

今回は、useEffect、useState、fetchを用いて実装します。

「App.js」

import './App.css';
import { useEffect, useState } from "react";

function App() {
  const initialURL = "https://jsonplaceholder.typicode.com/users";
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      let res = await getUser(initialURL);

      // ユーザをロード
      loadUser(res);

      // 3秒経ったら表示
      setTimeout(() => {
        console.log('sleep終了')
        setLoading(false);
      },3000)

    };
    fetchUserData();
  }, []);


  // jsonplaceholderからユーザを取得
  const getUser = (url) => {
    return new Promise((resolve, reject) =>{
      fetch(url)
      .then((res) => res.json())
      .then((data) => {
        resolve(data)
        console.log('getUser=',data)
      });
    })
  }

  // users配列にユーザデータをロード
  const loadUser = async (data) => {
    fetch(initialURL)
      .then((res) => {
        return res.json();
      })
      .then((data) => setUsers(data));
  }

  console.log('コンソールログ＝',users)

  return (
    <div className="App">
      {loading? (
        <h1>ロード中ーーーー</h1>
      ) : (
        <>
          <h1>JSON-APIテスト</h1>
          <hr/>
          {users.map((userdata) => (
            <div key={userdata.id}>
              <h2>user-id:{userdata.id}</h2>
              <h3>name:{userdata.name}</h3>
              <h4>mail:{userdata.email}</h4>
              <hr/>
            </div>
          ))}
        </>
      )}
    </div>
  );
}

export default App;

３．動作確認

ファイルの編集が終わったら「npm start」にて起動するか確認します。

３秒待ってから

テストユーザが表示されます。

では