Reactでmapでエラーが出てしまう

Question

公開URL
https://react-chart-72e6c.web.app/
github
https://github.com/takoyan33/react-chart-app

こちらを参考にして、
https://zenn.dev/shimapon3/articles/13e3d4b147742c
APIの練習として、Rechart.jsを使ったサイトを作りたいと考えています。
その練習としてmapで都道府県名を表示させたいと考えているのですが、下記のエラーが出ました。

Uncaught TypeError: prefectures.map is not a function
    at Main (Main.jsx:23:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)

console.log(results.data); をすればデータを取れているので、原因が分かっていません。
分かる方がいればよろしくお願いします。

import React, { useEffect, useState } from "react";
import axios from "axios";
// import Chart from "./Chart";
// import CheckField from "./CheckField";

const Main = () => {
  const [prefectures, setPrefectures] = useState("");

  useEffect(() => {
    axios
      .get("https://opendata.resas-portal.go.jp/api/v1/prefectures", {
        headers: { "X-API-KEY": process.env.REACT_APP_API_KEY },
      })
      .then((results) => {
        setPrefectures(results.data);
        console.log(results.data); 
      })
      .catch((error) => {});
  }, []);

  return (
    <div>
      <h2>都道府県</h2>
      {
      prefectures.map((prefecture) => <li>{ prefecture }</li>)
      }
      <h2>人口推移グラフ</h2>
    </div>
  );
};

#console.logの結果
export default Main;
console.logの結果
Object
message: null
result: Array(47)
0:
prefCode: 1
prefName: "北海道"
[[Prototype]]: Object
1:
prefCode: 2
prefName: "青森県"
[[Prototype]]: Object
2:
prefCode: 3
prefName: "岩手県"
[[Prototype]]: Object
3:
prefCode: 4
prefName: "宮城県"
[[Prototype]]: Object
4:
prefCode: 5
prefName: "秋田県"
[[Prototype]]: Object
5:
prefCode: 6
prefName: "山形県"
[[Prototype]]: Object
6:
prefCode: 7
prefName: "福島県"
[[Prototype]]: Object
7:
prefCode: 8
prefName: "茨城県"
[[Prototype]]: Object
8:
prefCode: 9
prefName: "栃木県"
[[Prototype]]: Object
9:
prefCode: 10
prefName: "群馬県"
[[Prototype]]: Object
10:
prefCode: 11
prefName: "埼玉県"
[[Prototype]]: Object
11:
prefCode: 12
prefName: "千葉県"
[[Prototype]]: Object
12:
prefCode: 13
prefName: "東京都"
[[Prototype]]: Object

これが47県分ありました。

Comments

[hoshi-takanori]

prefectures の初期値 "" は配列ではなく、map メソッドを持たないのでは…。

[takoyan]

コメントありがとうございます。
= useState(""); が間違っているという感じでしょうか。（的外れかもしれませんが。）
よろしくお願いします。

[hoshi-takanori]

prefectures の初期値を空の配列 [] にすれば、配列なので map は使えます。
const [prefectures, setPrefectures] = useState([]);
(ただ、それだと何も表示されないので、prefectures の値をチェックして空なら「ロード中」とか表示した方が親切な気はしますが。)

Answer 1

console.log(results.data); をすればデータを取れているので

通信は非同期処理なので、最初の描画にデータは間に合わず、useStateに指定した初期値がそのまま使われます。""（文字列）にmapメソッドはありません。

Comments

[takoyan]

コメントありがとうございます。
承知しました。
もしこの場合で、mapで表示したい場合にはどのような書き方をすれば良いでしょうか。
よろしくお願いします。

[maisumakun]

> mapで表示したい場合には

「データがない場合は表示させない（mapを呼ばない）」という選択肢もあります。

[takoyan]

承知しました。その場合だとif文などで分岐する感じでしょうか。
よろしくお願いします。

[maisumakun]

JSXの中に書けるのは「式」なので、三項演算子（? :）や論理演算子（&&や||）のショートサーキットで制御します。