React 入門

% curl http://127.0.0.1:8000/comments/9/ ⏎
{"id":9,"title":"9個目のコメント","body":"コメントの本文9","updated_at":"2023-11-21T11:20:00"}%

プログラムの先頭で useState，useEffect と axios をインポートします．

src/components/CommentShowPage.tsx（抜粋）
import React from 'react'
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios, { AxiosResponse } from 'axios';

次の16行目では API から取得したコメントデータを管理する data とそれを更新する関数 setData を定義しています．この data を型付けするために CommentData インタフェースを6行目で定義しています．19行目からの useEffectでは依存する値に [url] を指定していることから，変数 url の値が変更されたときにだけ API からコメントデータを取得して非同期的に画面を更新します．35行目では読み込んだコメントの詳細情報を表示しています．

src/components/CommentShowPage.tsx
import React from 'react'
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios, { AxiosResponse } from 'axios';

interface CommentData {
  id: number;
  title: string;
  body: string;
  updated_at: string;
}

const CommentShowPage: React.FC = () => {
  const {commentId} = useParams<{commentId: string}>();

  const [data, setData] = useState<CommentData | null>(null);
  const url = `http://127.0.0.1:8000/comments/${commentId}/`;

  useEffect(() => {
    axios.get<CommentData>(url)
      .then((res: AxiosResponse<CommentData>) => setData(res.data))
      .catch(err => console.log(err.message));
  }, [url]);

  if (data === null) {
    return (
      <div className="container">
        <h1>コメント</h1>
        <article>
        </article>
      </div>
    );
  }

  return (
    <div className="container">
      <h1>コメント</h1>
      <article>
        <div>ID: {data.id}</div>
        <div className="title">Title: {data.title}</div>
        <div className="body">Body: {data.body}</div>
        <div className="body">最終更新： {data.updated_at}</div>
      </article>
    </div>
  )
}

export default CommentShowPage

上記のコードの35〜45行目で，初回読み込み時の API からの読み込みが終了するまでは data の値が初期値の null であることから，data.title のようにプロパティにアクセスしようとするとエラーが発生します．これを防止する方法は幾つかありますが，上記では25行目の if による条件分岐でエラーを防止しています．もう一つの方法は，ここと同じ考え方で16行目の useState() にオブジェクトの初期値を渡す方法が考えられます．

コメントの詳細表示ページをブラウザで確認します．

目次に戻る