REACT API取得、表示 手順
目的:下記のデータを取得、表示する
https://jsonplaceholder.typicode.com/posts
axiosのインストール
useEffect フック
公式サイトより
useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。副作用とは React の純粋に関数的な世界から命令型の世界への避難ハッチであると考えてください。
デフォルトでは副作用関数はレンダーが終了した後に毎回動作しますが、特定の値が変化した時のみ動作させるようにすることもできます。
useState フック
定義
ステートフルな値と、それを更新するための関数を返します。
初回のレンダー時に返される state は第 1 引数として渡された値 (initialState) と等しくなります。
Point
jsonの取得はaxiosを利用 useEffectを利用
liタグにはidが必要
sample
import React, { useState, useEffect } from 'react' import axios from 'axios' export const AppFetch = () => { // 初期値 const [posts, setPosts] = useState([]) //1回だけ呼ばれる useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/posts') .then(res => { setPosts(res.data) }) }, []) return ( <div> {posts.map(post => <li key="{post.id}">{post.id}</li> )} </div> ) }
目的:idを入力して記事をAPIでを取ってくる