import React from "react";
import memeData from "./memeData";
export default function Meme(){
const [memeImage, setMemeImage] = React.useState("")
function getMemeImage(){
const memesArray = memeData.data.memes
const randomNumber = Math.floor(Math.random() * memesArray.length)
setMemeImage(memesArray[randomNumber].url)
}
return(
<div>
<form className="form">
<input type="text" className="form-input" placeholder="Top Text" />
<input type="text" className="form-input" placeholder="Bottom Text" />
<button className="btn" onClick={getMemeImage}>Get a new meme image 🖼</button>
</form>
<img src={memeImage} alt="memes"></img>
</div>
)
}
因此,当我点击按钮,它应该添加新的图像,但它只是返回一个空字符串和图标的img时,它不工作
1条答案
按热度按时间dldeef671#
您提供的 * 数据 * 看起来不错。我认为您面临的问题是每次点击按钮时自动刷新网站,因为您的按钮被
form
包裹。默认按钮 * 类型 * 是submit
,这就是为什么您无法显示图像。只需将其类型更改为button
即可。