# Reactでどうしてもお魚を釣りたい（意訳）
単にReactからAPIを叩いてお魚データを取得するだけのソースコードです。

お魚データを取得中はローディングコンポーネントを表示します。

import { FishList } from '@/components/FishList'
import { Loading } from '@/components/Loading'
import { useFetch } from '@/hooks/useFetch'
import { Fish } from '@/types/Fish'

export const Fishes = () => {
  const { data, isLoading, isError } = useFetch<Array<Fish>>('/api/fishes')

  if (isError) {
    return <div>エラーが発生しました。。</div>
  }

  if (!data || isLoading) {
    return <Loading />
  }

  return <FishList fishes={data} />
}

`useFetch`は[この記事](https://zenn.dev/apple_yagi/articles/bc52d83ec61aee)をめちゃくちゃ参考にしました。

import { useEffect, useState } from 'react'

/**
 * 任意の型のデータをAPIから取得するためのカスタムフックです。
 * Array<Fish>型のjsonデータを/api/fishesから取りたい場合は
 * const { data, isLoading, isError } = useFetch<Array<Fish>>('/api/fishes')
 * をコンポーネントの中で最初に呼びます。
 */
export const useFetch = <T>(url: string) => {
  const [data, setData] = useState<T>()
  const [isLoading, setLoading] = useState(true)
  const [isError, setError] = useState(false)

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-extra-semi
    ;(async () => {
      try {
        const res = await fetch(url)
        const data = await res.json()
        setData(data)
      } catch (err) {
        console.log(err)
        setError(true)
      } finally {
        setLoading(false)
      }
    })()
  }, [])

  return { data, isLoading, isError }
}

APIがどのような値を返すことを期待しているかこのファイルで宣言しています。

type PK = 'fishes'

type Class = 'fish' | 'shark' | 'mammalian'

type Name = {
  japanese: string
  english: {
    value: string
    furigana: string
  }
}

export type Fish = {
  id: string
  pk: PK
  class: Class
  name: Name
  explanation: string
  imageUrl: string
}

ちなみに表示に使用するFishListコンポーネントはこのようなコードになっています。

import { Fish } from '@/types/Fish'

interface Props {
  fishes: Array<Fish>
}

export const FishList = (props: Props) => {
  const fishItems = props.fishes.map((fish) => (
    <li key={fish.id}>
      <p>ID: {fish.id}</p>
      <p>プライマリーキー: {fish.pk}</p>
      <p>分類: {fish.class}</p>
      <p>日本語名: {fish.name.japanese}</p>
      <p>英語名: {fish.name.english.value}</p>
      <p>英語ふりがな: {fish.name.english.furigana}</p>
      <p>解説: {fish.explanation}</p>
      <img src={fish.imageUrl} />
    </li>
  ))

  return <ul>{fishItems}</ul>
}

受け取ったお魚データの数だけリストにして返しているだけです。