deve.K

エンジニアが未来を切り開く。

English

React Hooks API fetchで取得


スポンサーリンク

react画像

本日はReactのHooksでfetchを使用しAPIを叩いちゃいましょう!

ReactのクラスではAJAXコールというのがあります AJAXライブラリをReactと組み合わせます。

AJAX コールでのデータ取得はcomponentDidMount のライフサイクルメソッドを使いsetStateメソッドで更新していきます。

Hooksの場合はライフサイクルと言えば、useEffectを使用しuseStateで更新します。

今回はクラスは置いといて、HooksによるAPIです。

Hook

React16.8から追加されたクラスを使用せずともstateやその他の機能を使用でき関数コンポーネントにReact状態を追加し実装する事が可能です。

useEffect

エフェクトHookを使用すると、関数コンポーネントで副作用を実行することができます。

fetchメソッド使ってデータを取得していきます

JS触れてる方ならお馴染みのメソッドです。

それでは学習する時はお決まりのcreate-react-appを使用します。

構築が手っ取り早いのでこういうのはバンバン活用しましょう。

インストール方法が分からない方はこちらから

Getting Started | Create React App

まずは必要なモジュールをimportしていきましょう!!

import { useEffect, useState } from 'react';

全体図コード

const App = () => {

  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => {setPosts(data)
    })
  },[])

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

  return (
   <div>
     <ul>
     {usePosts}
    </ul>
   </div>
    );
  }
export default App;



1
sunt aut facere repellat provident occaecati excepturi optio reprehenderit
2
qui est esse
3
ea molestias quasi exercitationem repellat qui ipsa sit aut
4
eum et est occaecati
5
nesciunt quas odio
6
dolorem eum magni eos aperiam quia
7
magnam facilis autem
8
dolorem dolore est ipsam
9
nesciunt iure omnis dolorem tempora et accusantium
10
optio molestias id quia eum
11
et ea vero quia laudantium autem
12
in quibusdam tempore odit est dolorem
13
dolorum ut in voluptas mollitia et saepe quo animi
14
voluptatem eligendi optio
15
eveniet quod temporibus
16
sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio
17
fugit voluptas sed molestias voluptatem provident
18
voluptate et itaque vero tempora molestiae
19
adipisci placeat illum aut reiciendis qui
20
doloribus ad provident suscipit at

//省略

コードの解説します。

まず空の配列でuseStateメソッドを使用します。

const [posts, setPosts] = useState([])

useState()メソッドの状態Hookは初期状態で呼び出されます。

Hookは、現在の状態とそれを更新する関数の2つの値を返します

useEffectでコンポーネントのマウント時の処理を追加しfetchAPIで

ダミー用で提供されているURLを使用しAPIのリクエスト送信をします。

useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')

そして第2引数に空の配列を渡す事により監視する状態変数はなくなります

なので監視する必要がなくなるのでHookは1度だけ第1引数の関数が実行されます。

useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => {setPosts(data)
    })
  },[]) //空の配列を渡す

もし空の配列を渡し忘れると非同期処理の無限ループが起こる可能性があります。

最初のthen()でjson形式で取得し、次のthen()でデータを保存しpostsのstateに格納してます。

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => {setPosts(data)

マップ関数を使用しliタグを新しく配列として生成しデータをブラウザ上に表示していきます。

  const usePosts = posts.map((post)=>{
    return <div>
                <li>{post.id}</li>
                <li>{post.title}</li>
              </div> 
    });


hooks学ぶなら個人的にこちらオススメします!。

プライバシーポリシー