Uncaught TypeError: x.map is not a functionの対処法

こんにちは、フロントエンドエンジニアの「てりー」です。
僕の詳しいプロフィールはこちら

フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました!!

興味ある方は是非ご覧ください。


関連記事

プログラミング完全初心者何から勉強すれば良いか分からない。具体的にやることを教えて欲しい。 こういった疑問に答えて、フロントエンドエンジニアになる為の具体的な勉強プランについて解説しています[…]

 

また、関数型のJavaScriptの書き方に不安がある人は、こちらの記事も併せてご覧下さい。

Qiita

こんにちは、フロントエンドエンジニアのてりーです。僕の詳しいプロフィールはこちらReactを仕事で使いこなしたい人、Re…

エラー内容

Uncaught TypeError: x.map is not a function

このエラーはmapメソッドを配列以外のオブジェクトに対して呼び出そうとした場合に発生します

該当のコード例

sample.map( item => { // 処理})

今回の場合だと、sampleが配列じゃないといけないのに、オブジェクトである事が原因です!

mapメソッドは配列→新しい配列を作る

mapメソッドは配列に一律で処理を加えて、新しい配列を作るメソッドです。

例:usersから名前だけの配列を作る

<span class="hljs-keyword">const</span><span> users = [ <br /> { </span><span class="hljs-attr">id</span><span>: </span><span class="hljs-number">1</span><span>, </span><span class="hljs-attr">name</span><span>: </span><span class="hljs-string">'Alice'</span><span> },<br /> { </span><span class="hljs-attr">id</span><span>: </span><span class="hljs-number">2</span><span>, </span><span class="hljs-attr">name</span><span>: </span><span class="hljs-string">'Bob'</span><span> }, <br /> { </span><span class="hljs-attr">id</span><span>: </span><span class="hljs-number">3</span><span>, </span><span class="hljs-attr">name</span><span>: </span><span class="hljs-string">'Charlie'</span><span> } <br />];<br /><br />↓<br /><br /><span class="hljs-keyword">const</span> names = users.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">user</span> =></span> user.<span class="hljs-property">name</span>);<br /><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(names); <span class="hljs-comment">// 出力: ['Alice', 'Bob', 'Charlie']</span><br /><br /><br /></span>

 

解決策:オブジェクトを配列にしてからmapメソッドを使う!

oObject.values()を使ってオブジェクトのキーを配列に変換してからmapメソッドを使いましょう!

以下のコードならエラーは出ずにmapを実行できる。

Object.values(sample).map(item => { // 処理})

以上です!

React + TypeScriptの勉強手順を知りたい方へ

React+ TypeScriptを仕事で使いこなしたいけど、知識に不安がある人に向けて、具体的な勉強方法のロードマップをまとめました。

関連記事

僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。ノウハウがたまってきたので、React + TypeScriptの勉強方法をまとめようと思います。すでにReact+Ty[…]

興味ある方は是非ご覧ください。