React 入門

TypeScript コメント掲示板アプリの開発

Axios による API からのデータ取得

前のページでは JavaScript の fetch 関数を用いて API からデータを取得しました．以降では API からのレスポンス処理を行いやすくするために Axios というライブラリを利用することにします．まずは，ターミナル（またはコマンドプロンプト）で次のコマンドを実行して axios をインストールします．

% npm install axios ⏎

Axios のインストールができたら CommentListPage.tsx の先頭で axios をインポートします．

src/components/CommentListPage.tsx（抜粋）
import axios, { AxiosResponse } from 'axios';

CommentListPage.tsx を編集して，axios で API にリクエストを送信するようにします．このとき，前のページで追加した useEffect 関数部分をそのまま次のコードに置き換えるようにしてください．次の通り，setResults() 関数を呼び出しすことで API から取得したデータに更新することができます．

src/components/CommentListPage.tsx（抜粋）
useEffect(() => {
  const url = "http://127.0.0.1:8000/comments/";
  axios.get<Results>(url)
      // .then((res: AxiosResponse<Results>) => console.log(res.data))
      .then((res: AxiosResponse<Results>) => setResults(res.data))
      .catch(err => console.log(err.message));
}, []);

上のコードでは，API からのレスポンスを受け取った後，setResult(res.data) で results の値を更新しています．React では useState で管理する値が変化するたびにそのコンポーネントが新たに作り直され，画面の中でそのコンポーネントだけが再描画されることになります．実際にブラウザで再読み込みを何度か繰り返して動作を確認してください．最初にダミーのコメントが描画された後，API から取得した2件のコメントの部分だけが遅れて再描画されていることを確認できるはずです．

API のデータベースには10件のコメントが保存されており，一覧表示では更新日時の新しいコメントが2件だけ表示されます．次のページではコメントの総数を表示し，過去のデータに表示を切り替えられるようにします．

目次に戻る