質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

6325閲覧

mapを使用すると[TypeError ※※.map is not a function]と表示される

kaji120

総合スコア39

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2021/11/23 02:11

前提・実現したいこと

fechを用いて取得したデータをセレクトボックスで表示したいです。
DoglistContainer.jsで取得したapiをApp.jsで表示したいです。

発生している問題・エラーメッセージ

TypeError breeds.map is not a function

該当のソースコード

App.js

js

1 2 3import * as React from 'react' 4import './App.css' 5import Description from './Description' 6import DogListCintainer from './DogListContainer' 7import Header from './Header' 8 9 10export const App = () => { 11 12 return ( 13 <div> 14 < Header title="dogアプリ" /> 15 <DogListCintainer /> 16 <div className="container"> 17 <Description text= "犬の画像を表示させています。"/> 18 </div> 19 </div> 20 ) 21} 22

DogListContainer

js

1import { useEffect, useState } from "react"; 2import React from "react"; 3 4export function DogListCintainer() { 5 const [breeds, setBreeds] = useState("shiba") 6 const url = "https://dog.ceo/api/breeds/list/all" 7 useEffect(() => { 8 fetch(url) 9 .then(res => res.json()) 10 .then( 11 (result) =>{ 12 const dog = result.message 13 console.log(dog) 14 setBreeds(result.message) 15 }) 16 }, []) 17 18 const dogList = breeds.map((value) => { 19 <option> {value}</option> 20 }) 21 22 return ( 23 <div> 24 <select> 25 {dogList} 26 </select> 27 </div> 28 ) 29} 30export default DogListCintainer;

取得したAPI

{ "message": { "affenpinscher": [], "african": [], "airedale": [], "akita": [], "appenzeller": [], "australian": [ "shepherd" ], "basenji": [], "beagle": [], "bluetick": [], "borzoi": [], "bouvier": [], "boxer": [], "brabancon": [], "briard": [], "buhund": [ "norwegian" ], "bulldog": [ "boston", "english", "french" ], "bullterrier": [ "staffordshire" ], "cattledog": [ "australian" ], "chihuahua": [], "chow": [], "clumber": [], "cockapoo": [], "collie": [ "border" ], "coonhound": [], "corgi": [ "cardigan" ], "cotondetulear": [], "dachshund": [], "dalmatian": [], "dane": [ "great" ], "deerhound": [ "scottish" ], "dhole": [], "dingo": [], "doberman": [], "elkhound": [ "norwegian" ], "entlebucher": [], "eskimo": [], "finnish": [ "lapphund" ], "frise": [ "bichon" ], "germanshepherd": [], "greyhound": [ "italian" ], "groenendael": [], "havanese": [], "hound": [ "afghan", "basset", "blood", "english", "ibizan", "plott", "walker" ], "husky": [], "keeshond": [], "kelpie": [], "komondor": [], "kuvasz": [], "labradoodle": [], "labrador": [], "leonberg": [], "lhasa": [], "malamute": [], "malinois": [], "maltese": [], "mastiff": [ "bull", "english", "tibetan" ], "mexicanhairless": [], "mix": [], "mountain": [ "bernese", "swiss" ], "newfoundland": [], "otterhound": [], "ovcharka": [ "caucasian" ], "papillon": [], "pekinese": [], "pembroke": [], "pinscher": [ "miniature" ], "pitbull": [], "pointer": [ "german", "germanlonghair" ], "pomeranian": [], "poodle": [ "miniature", "standard", "toy" ], "pug": [], "puggle": [], "pyrenees": [], "redbone": [], "retriever": [ "chesapeake", "curly", "flatcoated", "golden" ], "ridgeback": [ "rhodesian" ], "rottweiler": [], "saluki": [], "samoyed": [], "schipperke": [], "schnauzer": [ "giant", "miniature" ], "setter": [ "english", "gordon", "irish" ], "sheepdog": [ "english", "shetland" ], "shiba": [], "shihtzu": [], "spaniel": [ "blenheim", "brittany", "cocker", "irish", "japanese", "sussex", "welsh" ], "springer": [ "english" ], "stbernard": [], "terrier": [ "american", "australian", "bedlington", "border", "cairn", "dandie", "fox", "irish", "kerryblue", "lakeland", "norfolk", "norwich", "patterdale", "russell", "scottish", "sealyham", "silky", "tibetan", "toy", "welsh", "westhighland", "wheaten", "yorkshire" ], "tervuren": [], "vizsla": [], "waterdog": [ "spanish" ], "weimaraner": [], "whippet": [], "wolfhound": [ "irish" ] }, "status": "success" }

試したこと

・取得したAPIが配列ではないためmapを使用できないと考えました。そこでeachに変えてみましたがエラーは治りませんでした。

・fechで取得したデータをオブジェクトから配列に変換してからmapで表示しようとしましたが、keyが必要だっため、難しいと判断しました。

・取得した値を配列で保存使用しましたが[message.result]結果は変わりませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

const dogList = Object.keys(data.message).map((value) => { return <option key={value}>{value}</option> })

Object.keysを使用してAPIから取り出したデータを配列に変換することで解決できました。

投稿2021/11/24 07:50

kaji120

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

えっと、どのような結果を想定していたのですか?

const [breeds, setBreeds] = useState("shiba")と、この変数に入れているものは文字列1つです。文法的なエラーもそうですが、もともと何がしたかったのかの意図も、コードから読み取れません。

投稿2021/11/23 02:20

maisumakun

総合スコア144986

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaji120

2021/11/23 02:24

ご回答ありがとうございます。 取得したAPIをセレクトボックスで一覧として表示させたかったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。