【React】配列データをmapした際に表示された”Cannot read property ‘map’ of undefined” の解消方法

”データベースからカテゴリ一覧のデータを取得 → データをstateにセット　→　そのstateをmap関数で展開してリスト要素(<ul><li>…)として画面上に表示する”　

といった機能をReact.jsで作ろうとしていた。ところ、”Cannot read property ‘map’ of undefined” というエラーが出現。

これは文字通り「undefinedはmapで回せないぞ」というエラーだが、この処理であれこれ振り回されたのでメモっておく。データ取得に関しては割愛。

方法1：stateの初期値に空の配列をセットしておく

取得したデータをセットするstateの初期値が、下のコードのようにundefinedだったりするとこのエラーが発生してしまう。

修正前
const [data, setData] = useState();
あるいは　const [data, setData] = useState(undefined);

これを回避するために一番手っ取り早いのは初期値に空配列を入れておくという方法だろう。

修正後
  const [data, setData] = useState([]);

方法2： 条件つきレンダーをすることで回避する

mapで展開したい data が undefined の時は展開しない（undefinedでないなら展開する）という条件を記述するという方法。

修正前　これだとdataがundefinedの場合エラーになってしまう
    <ul>
      {data.map((it) => (
        <li key={it.id}>{it.name}</li>
      ))}
    </ul>

修正後ver1　undefinedでないならと条件を書くことで回避できる
    <ul>
      {data !== undefined &&
       data.map((it) => (
        <li key={it.id}>{it.name}</li>
      ))}
    </ul>

上の例は一番簡単な例だが、例えば「データの取得が完了するまでロード表示を出すようにしておく」など、よりユーザビリティに優れたカスタムもこの方法なら簡単にできる。

参考
https://ja.reactjs.org/docs/conditional-rendering.html