問題一覧に戻る
中級副作用
問題41: データフェッチ

APIからのデータ取得方法を学びます。useEffect内でasync/awaitを使用する際の注意点を理解しましょう。非同期関数は直接useEffectの引数にできないため、内部で定義して呼び出す必要があります。また、ローディング状態の管理やエラーハンドリングも重要です。実際のアプリケーションでは、データ取得は頻繁に必要となる処理なので、正しいパターンを身につけることが大切です。

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

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

  useEffect(() => {
    // 非同期関数を定義
    const fetchUser =  () => {
      try {
        // データをフェッチ
        const res =  fetch('/api/user');
        const data = await res.json();
        setUser(data);
      } finally {
        setLoading(false);
      }
    };
    
    // 非同期関数を呼び出し
    fetchUser();
  }, []);

  if (loading) return <p>Loading...</p>;
  return <p>{user?.name || "No user"}</p>;
}

export default UserData;
···