React/useEffectについて(外部APIからデータを持ってきてみる)

公開日 2020/9/20 最終更新日 2020/9/19

・components/DataFetch.jsを作成

・rfceスニペット

・useState,useEffectの読み込み

・ランダムなユーザーをAPIから取得して表示したいので、userというstateを作る(初期値はnull)

・外部APIとのやり取りになるのでloadingを作る(初期値はtrue)

・データ取得の関数を作る。ここでは外部APIを取得してくるのでasnc awaitを使って非同期処理にしていく。

・とってきたデータをセットする。

・完成した関数をuseEffect内で読み込む

・emptyarrayを第2引数に渡し、初回render時のみの実行にする。

・jsxにはnameの表示をする。

・App.jsに読み込む

DataFetch.js

import React,{ useState, useEffect } from 'react'

function DataFetch() {
    const [user, setUser] = useState(null)
    const [loading, setLoading] = useState(true)

    const fetchData = async () => {
        const response = await fetch('https://api.randomuser.me/')
        const data = await response.json()
        const [item] = data.results

        setUser(item)
        setLoading(false)
    }

    useEffect(() => {
        fetchData()
    },[])

    return (
        <div>
            {loading ? <h1>Loading...</h1> : <h1>{user.name.first} {user.name.last}</h1>}
        </div>
    )
}

export default DataFetch

App.js

import React from 'react';
import './App.css';
import DataFetch from './components/DataFetch';
// import EffectHook from './components/EffectHook';
// import Counter from './components/Counter.js';
// import CounterHook from './components/CounterHook';
// import FormHook from './components/FormHook';
// import ItemHook from './components/ItemHook';
// import MouseEventEffect from './components/MouseEventEffect';




function App() {
  return (
    <div className="App">
      {/* <Counter /> */}
      {/* <CounterHook /> */}
      {/* {<FormHook />} */}
      {/* <ItemHook /> */}
      {/* {<EffectHook />} */}
      {/* <MouseEventEffect /> */}
      <DataFetch />
    </div>
  );
}

export default App;

ブラウザでは無事に名前が取得できている。

・もう少しネクストレベル。

・component/DataFetchById.jsを作成

・rfceスニペット

・useState,useEffectの読み込み

・今回は記事を扱うのでpoststateを用意

・idstateも用意し、初期値に1を設定

・loadingstateを用意

・fetchdatafunctionを作る

・asncを使う

これをuseEffect内に読み込む

今回はidが変わる度にuseEffectを実行したいので、第2引数にidを入力する。

jsx内にはinputフィールドと記事のタイトルを表示。

App.jsに読み込む

DataFetchById.js

import React,{ useState, useEffect } from 'react'

function DataFetchById() {
    const [post, setPost] = useState(null)
    const [id, setId] = useState(1)
    const [loading, setLoading] = useState(true)

    const fetchData = async () => {
        setLoading(true)
        const responce = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
        const item = await responce.json()
        setPost(item)
        setLoading(false)
    }

    useEffect(() => {
        fetchData()
    },[id])
    return (
        <div>
            <input
             type='text'
             value={id}
             onChange={e => setId(e.target.value)}
            />
            {loading ? <h1>Loading...</h1>: <h1>{post.title}</h1>}
        </div>
    )
}

export default DataFetchById

App.js

import React from 'react';
import './App.css';
// import DataFetch from './components/DataFetch';
import DataFetchById from './components/DataFetchById';
// import EffectHook from './components/EffectHook';
// import Counter from './components/Counter.js';
// import CounterHook from './components/CounterHook';
// import FormHook from './components/FormHook';
// import ItemHook from './components/ItemHook';
// import MouseEventEffect from './components/MouseEventEffect';




function App() {
  return (
    <div className="App">
      {/* <Counter /> */}
      {/* <CounterHook /> */}
      {/* {<FormHook />} */}
      {/* <ItemHook /> */}
      {/* {<EffectHook />} */}
      {/* <MouseEventEffect /> */}
      {/* <DataFetch /> */}
      <DataFetchById />
    </div>
  );
}

export default App;

このようにuseEffectを使うことで、ライフサイクルメソッドや副作用処理を関数コンポーネントで扱うことができる。

副作用の扱いにはuseEffectと同じようにuseLayoutEffectというフックも存在するが、ほとんどuseEffectと同じ動きをする。

一点だけ違うところは、useLayoutEffectは処理がレンダリングをブロックしてしまうということ。だから基本的にレンダリングのブロックが必要ない場合はuseEffectを使うことを推奨する。

BLOG

React/useEffectについて(外部APIからデータを持ってきてみる)

Related posts