REACT API取得、表示 手順

目的:下記のデータを取得、表示する

https://jsonplaceholder.typicode.com/posts

axiosのインストール

www.npmjs.com

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でを取ってくる

f:id:happy_teeth_ago:20210417162117p:plain