React实现犬种图片展示时Image构造报错的解决求助

需求与问题描述 #

我希望在下拉框旁添加一个“查看”按钮，点击该按钮时展示下拉框选中犬种的图片列表，具体需求如下：

• 在下拉框旁放置“查看”按钮；
• 点击“查看”按钮时，调用Dog API获取选中犬种的图片列表（限制为12条），在DogListContainer中使用useState管理获取到的列表状态；
• 根据获取到的犬种图片列表展示图片。

编写组件代码后运行出现错误：

Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

错误原因 #

报错核心是代码中直接使用了<Image src={url} />作为JSX标签，但这里的Image是浏览器原生的DOM构造函数（用于创建Image对象），并非React组件，不能直接以JSX标签的形式调用。

修复方案 #

1. 将<Image>替换为原生HTML的<img>标签，这是React中展示图片的标准方式；
2. 修正BreedsSelect组件中按钮文字为“查看”，匹配需求描述；
3. 增加可选优化：为<img>添加alt属性提升可访问性，设置基础样式避免布局错乱；
4. 增加空值判断，防止未选中犬种时调用API。

修正后的完整代码 #

DogListContainer组件 #

import React, { useEffect, useState } from 'react'
import { BreedsSelect } from './BreedsSelect'

export const DogListContainer = () => {
  const [breedsUrl, setBreedsUrl] = useState([])
  const [breeds, setBreeds] = useState({})

  const fetchImages = async breed => {
    const response = await fetch(
      `https://dog.ceo/api/breed/${breed}/images/random/12`,
    )
    const data = await response.json()
    setBreedsUrl(data.message)
  }

  useEffect(() => {
    const fetchAll = async () => {
      try {
        const response = await fetch('https://dog.ceo/api/breeds/list/all')
        if (!response.ok) throw new Error('获取犬种列表失败')
        const data = await response.json()
        setBreeds(data.message)
      } catch (error) {
        console.error(error)
      }
    }

    fetchAll()
  }, [])

  return (
    <div>
      <BreedsSelect breeds={breeds} onFormSubmit={fetchImages} />
      <div className="columns is-vcentered is-multiline">
        {breedsUrl.map(url => (
          <div key={url} className="column is-3">
            <img 
              src={url} 
              alt={`犬种图片`} 
              style={{ width: '100%', height: 'auto' }} 
            />
          </div>
        ))}
      </div>
    </div>
  )
}

BreedsSelect组件 #

import React, { useState } from 'react'

export const BreedsSelect = props => {
  const [selectedBreed, setSelectedBreed] = useState('')

  function handleSubmit(event) {
    event.preventDefault()
    if (selectedBreed) {
      props.onFormSubmit(selectedBreed)
    }
  }

  const options = props.breeds

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <select
          value={selectedBreed}
          onChange={e => setSelectedBreed(e.target.value)}
        >
          <option value="" disabled>请选择犬种</option>
          {Object.keys(options).map(breed => (
            <option key={breed} value={breed}>{breed}</option>
          ))}
        </select>
        <button type="submit">查看</button>
      </form>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者user20280341