错误是什么"Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor ca

Question

import React, { useEffect, useState } from 'react' // DO NOT DELETE
import { BreedsSelect } from './BreedsSelect'
export const DogListContainer = () => {
const [breedsurl, setBreedsurl] = 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)
}
const [breeds, setBreeds] = useState({})
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 (
<div>
<BreedsSelect breeds={breeds} onFormSubmit={fetchImages} />
<div className="columns is-vcentered is-multiline">
{breedsurl?.map(url => {
return (
<div key={url} className="column is-3">
<Image src={url} />
</div>
)
})}
</div>
</div>
)
}

import React, { useState } from 'react'
export const BreedsSelect = props => {
const [selectedBreed, setSelectedBreed] = useState(null)
function handleSubmit(event) {
event.preventDefault()
props.onFormSubmit(selectedBreed)
}
const options = props.breeds
return (
<div>
<form onSubmit={handleSubmit}>
<select
value={selectedBreed}
onChange={e => setSelectedBreed(e.target.value)}
>
{Object.keys(options).map(breed => (
<option value={breed}>{breed}</option>
))}
</select>
<button type="submit">表示</button>
</form>
</div>
)
}

我想要一个"；查看"；按钮，单击后会显示下拉列表中所选犬种的图像列表。

1. 放置一个"；显示"按钮
2. 当"；显示"；单击按钮，使用dog API获取下拉列表中选择的狗品种的图像列表

• 根据犬种的不同，将返回100多条记录，因此限制要获取的记录数量(例如：12条记录(
• 使用useState来管理状态中获得的列表(在DogListContainer中编写状态的定义(

3. 根据获取的犬种图像列表，将图像显示为列表

我想到了上面两个代码来实现这一点，但我得到了错误构造"Image"失败：请使用"new"运算符，此DOM对象构造函数不能作为函数调用。我该如何解决？

Answer 1

您的Image标记应为小写img。或者如果您正在使用NextJsimport Image from "next/image"

return (
<div>
<BreedsSelect breeds={breeds} onFormSubmit={fetchImages} />
<div className="columns is-vcentered is-multiline">
{breedsurl?.map(url => {
return (
<div key={url} className="column is-3">
<img src={url} /> //here
</div>
)
})}
</div>
</div>
)