fetchを使ったAPI通信（Next.js）その②

データ取得（Read）

app/components/ReadDogs.js

"use client";
import { useEffect } from "react";

export default function ReadDogs(props) { // ✅ props から `dogs` を受け取る
    useEffect(() => {
        fetch("/dogs.json")
            .then((res) => res.json())
            .then((data) => props.setDogs(data)) // ✅ `page.js` の `dogs` を直接更新
            .catch((error) => console.error("エラー:", error));
    }, []);

    return (
        <div>
            <h1>🐶 犬のリスト</h1>
            <ul>
                {props.dogs.map((dog) => ( // ✅ `dogs` は `page.js` の `state` を使用
                    <li key={dog.id}>{dog.name}（{dog.age}歳）</li>
                ))}
            </ul>
        </div>
    );
}

コード解説

  useEffect(() => {
        fetch("http://localhost:3001/dogs")
            .then((res) => res.json())
            .then((data) => props.setDogs(data)) 
            .catch((error) => console.error("エラー:", error));
    }, []);

useEffectの処理でfetch関数を使って「/dogs.json」からデータを受け取っています。

fetch("http://localhost:3001/dogs")

取得先のURLを指定しています。

.then((res) => res.json())

受け取ったレスポンス情報をJSONデータに変換しています。

.then((data) => props.setDogs(data))

JSONデータをdogsのstateに設定しています。

.catch((error) => console.error("エラー:", error));

API通信が何らかの理由でうまくいかなかった際にエラー内容をログ出力する処理を記述しています。

次にJSXでは、

 {props.dogs.map((dog) => (
  <li key={dog.id}>{dog.name}（{dog.age}歳）</li>
  ))}

「dogs」配列をmapメソッドを使ってリスト表示しています。