React Hooks + TypeScriptによるAPIデータ取得(axios + fetch):id

2022年4月3日 13:44

はじめに

React Hooks + TypeScriptによるAPIデータ取得(axios + fetch):idのアウトプットになります。
特定のidに紐づいたデータの取得をします。
前回はReact Hooks + TypeScriptによるAPIデータ取得(axios + fetch)の使い方を学習し、その続きになります。

学習に使用した教材・参考資料

ゴール

以下のようにテキストボックスに数字を入れてボタンを押すとidに紐づいたテキストを取得して表示できるようにします。
取得しているデータはここのオブジェクトのtitleを表示してます。

学習手順

idを管理するステートを作る
idの入力フォームとボタン、読み取るステートを作る
動作確認

ファイル構造

# react-sample-app -> react-ts-app -> src

src
├── App.css
├── App.test.tsx
├── App.tsx
├── components
│   ├── ApiFetch.tsx              <-- 編集
│   ├── Hello1.tsx
│   ├── Hello2.tsx
│   ├── BasicUseEffect.tsx
│   ├── Timer.tsx
│   └── TimerContainer.tsx
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

1. idを管理するステートを作る

以下のコードでconst [id, setId] = useState(1) を追加した。
取得したオブジェクトのidを管理するステートになる。
初期値を1で設定してある。

# ApiFetch.tsx

import React, {useState、useEffect} from 'react'
//import axios from 'axios';


const ApiFetch = () => {
    
    const [posts, setPosts] = useState<any>([])
    const [id, setId] = useState(1)      //<-- 追加

        
    

    // useEffect(() => {
        // axios.get('https://jsonplaceholder.typicode.com/posts')
        // .then(res => {
        //     setPosts(res.data)   
        // })

      fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {method: "GET"})
        .then(res => res.json())
        .then(data => {
            setPosts(data);
        })

    // },[]);
    

  return (
    <div>
        <ul>
            {
                posts.map(post => <li key={post.id}>{post.title}</li>)
            }
        </ul>
    </div>
  )
}

export default ApiFetch

2. idの入力フォームとボタン、読み取るステートを作る

以下のコードにconst [clicked, setClicked] = useState(false)を追加してボタンをクリックしたことを読み取るステートを作る。
`https://jsonplaceholder.typicode.com/posts/${id}`を編集するシングルクォーとをバッククォートに変えて${}に表示したいオブジェクトの変数を入れる。
配列で表示はさせないので、<ul></ul>をコメントアウトする。
idの入力インプットが必要なので<input type='text' value={id} onChange={(evt=>setId(Number(evt.target.value)))} />を追加する。
入力したidをボタンを押すことで実行できるように、<button type='button' onClick={handlerClicked}>Get post</button> ボタンを追加する。
ボタンを実行できるようにする為の関数const handlerClicked = () =>{}を定義する。関数内にfetchメソッドを移動させると、ボタンをクリックするとidに紐づいたオブジェクトを取得することができる。
取得した<title>を表示させたいので、{posts.title} を埋め込む。

# ApiFetch.tsx

import React, {useState、useEffect} from 'react'
//import axios from 'axios';


const ApiFetch = () => {
    
    const [posts, setPosts] = useState<any>([])
    const [id, setId] = useState(1)      
    const [clicked, setClicked] = useState(false)    //<-- 追加
        
    const handlerClicked = () => {    //<-- 追加
        setClicked(!clicked)
        fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {method: "GET"})　　　　//<--編集
        .then(res => res.json())
        .then(data => {
            setPosts(data);
      
    }

    // useEffect(() => {
        // axios.get('https://jsonplaceholder.typicode.com/posts')
        // .then(res => {
        //     setPosts(res.data)   
        // })

      
        })

    // },[]);
    

  return (
    <div>
　　　　　　　　　　　　　 <input type='text' value={id} onChange={(evt=>setId(Number(evt.target.value)))} />  //<-- 追加
        <br />
        <button type='button' onClick={handlerClicked}>Get post</button>    //<-- 追加
        <br />
        {posts.title}    //<-- 追加
        {/* <ul>
            {
                posts.map(post => <li key={post.id}>{post.title}</li>)
            }
        </ul> */}
    </div>
  )
}

export default ApiFetch

3. 動作確認

localhost:3000に接続して、以下のように数字を入力してボタンを押すとオブジェクトのtitleが表示されればとりあえず成功。

おわりに

React Hooks + TypeScriptによるAPIデータ取得(axios + fetch):idの学習でした。
次回はuseContext コンセプトになります。