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

Question

import React, { useEffect, useState } from 'react' // DO NOT DELETE
import { BreedsSelect } from './BreedsSelect'
export const DogListContainer = () => {
  const [breeds, setBreeds] = useState(null)
  useEffect(() => {
    const fetchAll = async () => {
      try {
        const data = await fetch('https://dog.ceo/api/breeds/list/all')
        if (!data.ok) throw new Error('error')
        return data
      } catch (error) {
        return error
      }
    }

    fetchAll()
      .then(res => {
        res.json()
      })
      .then(data => {
        setBreeds(data.message)
      })
  }, [])
  return <BreedsSelect breeds={breeds} />
}

import React, { useState } from 'react'
export const BreedsSelect = props => {
  const [selectedBreed, setSelectedBreed] = useState(null)

  const options = props.breeds
  return (
    <div>
      <select
        value={selectedBreed}
        onChange={e => setSelectedBreed(e.target.value)}
      >
        {Object.keys(options).map(breed => (
          <option>{breed}</option>
        ))}
      </select>
    </div>
  )
}

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

Answer 1

以下の部分

.then(res => {
   res.json()
 })
.then(･･･

を、

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

.then(res => {
   return res.json()
 })
.then(･･･

とするか、または

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

.then(res => res.json())
.then(･･･

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

追記

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

Cannot convert undefined or null to object

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

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

Comments

[hiei1]

エラーが変わらないですね

[退会済みユーザー]

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