【react】render内でmap関数を使う時の注意ごと

セレクトボックスやラジオボタンを動的に表示したい時は、render内で配列をmapしてJSX内に流し込むことで

実現することができる。

が、componentDidmountの中でセレクトボックスのデータを取得している場合は、最初にrenderされた時に

クラッシュしてしまう。これは、componentDidmountはマウント直後に実行される関数であり、最初のrender

より遅い段階でデータを取ってくるためである。

反対にcomponentWillmountはマウントされる直前なのでrenderにたどり着く前にデータを取ってくることが

できるが、こちらは将来的に削除されるメソッドなので基本は使ってはならない。

この場合は、JSX内でif(selectData !== null)で値があるかどうか確認を取ればよい。

最初にrenderを通したデータが無い場合は、表示しない(クラッシュするような処理を避ける)。

後のconponentDidmountの中では関数を実行しているのでここで確実にデータを取ることができる。

このように、render内でmap関数やfilter関数を使用する場合はJSXにも気を配る必要があるので注意されたし。