fetchでデータを取ってstateに入れる

データ取得の全体像

外部のAPIからデータを取ってきて画面に出す、というのはアプリで最もよくある処理です。Reactでの流れはいつも同じ形になります。まずuseStateで「取ってきたデータを入れておく箱」を用意します。次にuseEffectの中でfetchを使ってサーバーに問い合わせます。返ってきたデータをsetで箱に入れると、stateが変わったReactが自動で再描画してくれて、画面にデータが現れます。

1. useStateで空の箱(初期値)を用意する
2. useEffectの中でfetchしてデータを取りに行く
3. 取れたデータをsetで箱に入れる
4. stateが変わり、Reactが自動で再描画して画面に反映される

.then()で書く基本形

JavaScriptで学んだfetchは、そのままReactでも使えます。fetchはPromiseを返すので、.then()でレスポンスを受け取り、.json()で本文を取り出し、もう一度.then()でsetに渡します。下の例は、記事一覧を初回に一度だけ取ってくる形です。

import { useEffect, useState } from "react";

function ArticleList() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch("/api/articles")
      .then((r) => r.json())
      .then((data) => setArticles(data));
  }, []); // 初回に一度だけ取得

  return (
    <ul>
      {articles.map((a) => (
        <li key={a.id}>{a.title}</li>
      ))}
    </ul>
  );
}

async/awaitで書きたいとき

async/awaitのほうが読みやすいと感じる人も多いはずです。ただし注意点があります。useEffectに渡す関数そのものをasyncにしてはいけません。async関数はPromiseを返しますが、useEffectは後片付け用の関数が返ってくることを期待しているため、噛み合わなくなるからです。そこで、effectの中に別のasync関数を作って、それをその場で呼び出すのが定番の書き方です。

useEffect(async () => {
  const r = await fetch("/api/articles");
  const data = await r.json();
  setArticles(data);
}, []);
// effectがPromiseを返してしまい、後片付けと噛み合わない

useEffect(() => {
  const load = async () => {
    const r = await fetch("/api/articles");
    const data = await r.json();
    setArticles(data);
  };
  load();
}, []);
// effect自体は普通の関数のまま。中でawaitを使える