初期表示時にapiを叩いてレスポンス値を画面に表示したい
解決したいこと
apiから受け取ったデータを画面表示させたい
発生している問題・エラー
発生しているエラーはなし
該当するソースコード
import React, { useCallback, useEffect, useState } from "react";
import axios from "axios";
interface ResponseData {
posts: ApiResponseData[];
}
interface ApiResponseData {
id: number;
name: string;
color: string;
age: number;
}
const Crud = () => {
const [posts, setPosts] = useState<ResponseData | []>([]);
useEffect(() => {
axios
.get("http://localhost:8000/api/hedgehogs/")
.then((response) => {
if (response.data) {
setPosts(response.data);
} else {
console.log("responmseデータがありません");
}
})
.catch(() => {
console.log("通信に失敗しました");
});
}, []);
if (!posts) {
return null;
}
return (
<>
<p>responseデータ</p>
{posts.map((post) => (
<div key={post.id}>
<p>{post.name}</p>
<p>{post.age}</p>
</div>
))}
</>
);
};
export default Crud;
from typing import List
from fastapi import APIRouter
router = APIRouter()
@router.get("/")
async def get_all_hedgehogs() -> List[dict]:
hedgehogs = [
{"id": 1, "name": "momo", "color": "SALT & PEPPER", "age": 2},
{"id": 2, "name": "coco", "color": "DARK GREY", "age": 1.5}
]
return hedgehogs
よろしくお願いします。
0
