Reactで取得したJSONデータをDOMに表示させたい ループ処理を使用する。

Question

前提・実現したいこと

Reactでfetchを使用して取得したJSONデータをループ処理で表示させたい。
最終的には　都道府県名：　□(チェックボックス)のように表示させたい。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'map' of undefined

該当のソースコード

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

const CheckBox = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [prefectures, setPrefectures] = useState([]);
  const [isChecked, toggleIsChecked] = useState(false);

  useEffect(() => {
    fetch("URL(伏せています)", {
      headers: {
        "X-API-KEY": 'APIキー(伏せています)'
      }
    })
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setPrefectures(result.result);
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  })

  // console.log(prefectures["0"].prefName);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <div>
        {prefectures.map(pref => (
          <p key={pref}>{pref.prefName} {pref.prefCode}</p>
        ))}
      </div>
    );
  }   
}

export default CheckBox;

取得したJSONデータ

{
    "message": null,
    "result": [{
        "prefCode": 1,
        "prefName": "北海道"
    }, {
        "prefCode": 2,
        "prefName": "青森県"
    }, {
        "prefCode": 3,
        "prefName": "岩手県"
    }, {
        "prefCode": 4,
        "prefName": "宮城県"
    }, {
        "prefCode": 5,
        "prefName": "秋田県"
    }, {
        "prefCode": 6,
        "prefName": "山形県"
    }, {
        "prefCode": 7,
        "prefName": "福島県"
    }, {
        "prefCode": 8,
        "prefName": "茨城県"
    }, {
        "prefCode": 9,
        "prefName": "栃木県"
    }, {
        "prefCode": 10,
        "prefName": "群馬県"
    }, {
        "prefCode": 11,
        "prefName": "埼玉県"
    }, {
        "prefCode": 12,
        "prefName": "千葉県"
    }, {
        "prefCode": 13,
        "prefName": "東京都"
    }, {
        "prefCode": 14,
        "prefName": "神奈川県"
    }, {
        "prefCode": 15,
        "prefName": "新潟県"
    }, {
        "prefCode": 16,
        "prefName": "富山県"
    }, {
        "prefCode": 17,
        "prefName": "石川県"
    }, {
        "prefCode": 18,
        "prefName": "福井県"
    }, {
        "prefCode": 19,
        "prefName": "山梨県"
    }, {
        "prefCode": 20,
        "prefName": "長野県"
    }, {
        "prefCode": 21,
        "prefName": "岐阜県"
    }, {
        "prefCode": 22,
        "prefName": "静岡県"
    }, {
        "prefCode": 23,
        "prefName": "愛知県"
    }, {
        "prefCode": 24,
        "prefName": "三重県"
    }, {
        "prefCode": 25,
        "prefName": "滋賀県"
    }, {
        "prefCode": 26,
        "prefName": "京都府"
    }, {
        "prefCode": 27,
        "prefName": "大阪府"
    }, {
        "prefCode": 28,
        "prefName": "兵庫県"
    }, {
        "prefCode": 29,
        "prefName": "奈良県"
    }, {
        "prefCode": 30,
        "prefName": "和歌山県"
    }, {
        "prefCode": 31,
        "prefName": "鳥取県"
    }, {
        "prefCode": 32,
        "prefName": "島根県"
    }, {
        "prefCode": 33,
        "prefName": "岡山県"
    }, {
        "prefCode": 34,
        "prefName": "広島県"
    }, {
        "prefCode": 35,
        "prefName": "山口県"
    }, {
        "prefCode": 36,
        "prefName": "徳島県"
    }, {
        "prefCode": 37,
        "prefName": "香川県"
    }, {
        "prefCode": 38,
        "prefName": "愛媛県"
    }, {
        "prefCode": 39,
        "prefName": "高知県"
    }, {
        "prefCode": 40,
        "prefName": "福岡県"
    }, {
        "prefCode": 41,
        "prefName": "佐賀県"
    }, {
        "prefCode": 42,
        "prefName": "長崎県"
    }, {
        "prefCode": 43,
        "prefName": "熊本県"
    }, {
        "prefCode": 44,
        "prefName": "大分県"
    }, {
        "prefCode": 45,
        "prefName": "宮崎県"
    }, {
        "prefCode": 46,
        "prefName": "鹿児島県"
    }, {
        "prefCode": 47,
        "prefName": "沖縄県"
    }]
}

試したこと 調べた記事

• mapをforEachで記述
• keyを入れる
• https://qiita.com/gotchane/items/b6a4078e57eb6d967ecb
• https://qiita.com/gotchane/items/b6a4078e57eb6d967ecb

補足情報（FW/ツールのバージョンなど）

React

Answer 1

解決いたしました。

APIの叩きすぎが原因だったようです。

Answer 2

setState 呼び出しは非同期です。呼び出し直後から this.state が新しい値を反映することを期待しないでください。もし現在の state に基づいた値を計算する必要がある場合は、オブジェクトの代わりに更新関数を渡してください。

コンポーネントの state – React

というわけで

setPrefectures(result.result)

を

setPrefectures((_) => result.result)

と直してあげるとよいのではないのでしょうか。