【React】hoge.map is not a functionの解決方法

はじめに

本記事では、Reactでmapを使用した際に発生する「hoge.map is not a function」というエラーの原因とその解決方法について解説します。特にstateの初期値に関する誤りが原因で、このエラーが発生する場合の対処法を紹介します。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

事象

ボタンをクリックすると、以下のようにdiv要素が追加されていく機能を実装しました。しかし、このコードを実行すると次のエラーが発生しました。

hoge.map is not a function

実際のコード

function App() {
  const [box, setBox] = useState(1);

  const onClickAddBox = () => {
    if (box.length < 5) {
      setBox((box) => [...box, box.length + 1]);
    }
    console.log("ボックスが増えました");
  };
  return (
    <>
      <button onClick={onClickAddBox}>ボックスを追加</button>
      {box.map((item, index) => (
        <div key={index}>
          <p>ボックスが増えます</p>
          {item}
        </div>
      ))}
    </>
  );
}

原因

stateの初期値が配列の形になっていなかったためのこのエラーが発生しました。
エラーの原因は、stateの初期値が配列ではなく数値として設定されていたことです。 mapは配列メソッドであるため、配列以外のデータ型に対して使用するとエラーが発生します。

このコードでは、boxを配列として扱いたいにもかかわらず、初期値が数値(1)になっていました。その結果、box.mapを呼び出そうとした際にエラーが発生しました。

修正コード
修正後のコードでは、boxの初期値を数値から配列([1])に変更しました。これにより、boxに対してmapメソッドを正しく使用できるようになりました。

function App() {
  const [box, setBox] = useState([1]); //配列の形に変更

  const onClickAddBox = () => {
    if (box.length < 5) {
      setBox((box) => [...box, box.length + 1]);
    }
    console.log("ボックスが増えました");
  };
  return (
    <>
      <button onClick={onClickAddBox}>ボックスを追加</button>
      {box.map((item, index) => (
        <div key={index}>
          <p>ボックスが増えます</p>
          {item}
        </div>
      ))}
    </>
  );
}

終わりに

本記事では、stateの初期値が適切でない場合に発生する「hoge.map is not a function」エラーの原因と解決方法を紹介しました。stateのデータ型や初期値に注意していきたいと思います。

参考

【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説！

『【js】x.map is not a functionの解決方法とそれから理解したこと』　Qitta