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

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

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

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

React.js

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

解決済

犬種をドロップダウンで選択して、選択した犬種の画像をリスト表示する」機能を出したいがエラーが出る。

hiei1
hiei1

総合スコア52

JavaScript

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

React.js

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

1回答

0グッド

1クリップ

260閲覧

投稿2022/10/24 07:37

DogListContainer.js

1import React, { useEffect, useState } from 'react' // DO NOT DELETE 2import { BreedsSelect } from './BreedsSelect' 3export const DogListContainer = () => { 4 const [breeds, setBreeds] = useState(null) 5 useEffect(() => { 6 const fetchAll = async () => { 7 try { 8 const data = await fetch('https://dog.ceo/api/breeds/list/all') 9 if (!data.ok) throw new Error('error') 10 return data 11 } catch (error) { 12 return error 13 } 14 } 15 16 fetchAll() 17 .then(res => { 18 res.json() 19 }) 20 .then(data => { 21 setBreeds(data.message) 22 }) 23 }, []) 24 return <BreedsSelect breeds={breeds} /> 25} 26

BreedsSelect

1import React, { useState } from 'react' 2export const BreedsSelect = props => { 3 const [selectedBreed, setSelectedBreed] = useState(null) 4 5 const options = props.breeds 6 return ( 7 <div> 8 <select 9 value={selectedBreed} 10 onChange={e => setSelectedBreed(e.target.value)} 11 > 12 {Object.keys(options).map(breed => ( 13 <option>{breed}</option> 14 ))} 15 </select> 16 </div> 17 ) 18} 19

犬種をドロップダウンで選択して、選択した犬種の画像をリスト表示する」機能を出したいです。
しかしながらこのようなエラーが出ます。
TypeError
Cannot convert undefined or null to object
どの様に解消すればいいでしょうか?

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

以下の部分

javascript

1.then(res => { 2 res.json() 3 }) 4.then(・・・

を、

(1) res.json() の前にreturnを追加して

javascript

1.then(res => { 2 return res.json() 3 }) 4.then(・・・

とするか、または

(2) 関数本体を囲む { ・・・ } を削除して

javascript

1.then(res => res.json()) 2.then(・・・

としてみるとどうでしょう?

追記

もう一点ありました。DogListContainer の中で useState で得ている breeds の初期値を null ではなく空オブジェクト {} に修正すると、

Cannot convert undefined or null to object

が出なくなるように思えます。

diff

1- const [breeds, setBreeds] = useState(null) 2+ const [breeds, setBreeds] = useState({})

投稿2022/10/24 08:40

編集2022/10/24 13:42
退会済みユーザー

退会済みユーザー

総合スコア0

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

hiei1

2022/10/24 13:06

エラーが変わらないですね
退会済みユーザー

退会済みユーザー

2022/10/24 13:42

よく見たら、もう一点ありましたので回答に追記しました。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

JavaScript

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

React.js

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