![Reactで「Uncaught TypeError: ○○.map is not a function」が出たときの解決法 Reactで「Uncaught TypeError: ○○.map is not a function」が出たときの解決法](https://senseiengineer.com/wp-content/uploads/2022/06/カスタムサイズ-–-3.png)
投稿日:2022/09/10 最終更新日:2022/09/10
Reactで「Uncaught TypeError: ○○.map is not a function」が出たときの解決法
原因
jsxにてmap関数でループさせたいとき、オブジェクトリストはそのまま使用することは出来ません。
例えば、以下のようにTestコンポーネントでは親コンポーネントからpropsでlistsのデータを受け取り、map関数でlistとして引数を設定して表示させれば問題ないはずです。
import React from 'react
const Test = (props) => {
return (
<ul>
{ props.lists.map((list) => {
<li>{ list }</li>
))}
</ul>
)
}
export default Test
しかし、「Uncaught TypeError: ○○.map is not a function」がエラー出力された場合はループさせる要素が正しく指定されていないためエラーが出てしまいます。
解決法
Object.keys()もしくはObject.values()を使用する
私の場合はvalueをループ表示させたかったのでObject.values()を以下のように反映しました。
修正部分は6行目です。
import React from 'react
const Test = (props) => {
return (
<ul>
{ Object.values(props.lists).map((list) => {
<li>{ list }</li>
))}
</ul>
)
}
export default Test
これで問題なくpropsの値を出力できましたので、解決です。