React 入門

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

コメント詳細情報を表示する

ここでは CommentShowPage コンポーネントで API から指定した id のコメントを取得して，その詳細情報を表示するようにします．ターミナル（またはコマンドプロンプト）から curl コマンドでコメントの ID を指定してコメント情報を取得する方法を示します．なお，コマンド最後の /9/ にはコメントの ID を指定することに注意してください．

% 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.js（抜粋）
import React from 'react'
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';

次の9行目では API から取得したコメントデータを管理する data とそれを更新する関数 setData を定義しています．12行目からの useEffectでは依存する値が空配列 [] であることから，初回読み込み時にだけ API からコメントデータを取得して非同期的に画面を更新します．31行目では読み込んだコメントの詳細情報を表示しています．

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

const CommentShowPage = () => {
  const params = useParams();

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

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

  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>最終更新： {data.updated_at}</div>
      </article>
    </div>
  )
}

export default CommentShowPage

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

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

目次に戻る