为什么我的按钮不返回值并且根本不显示我的图像

Question

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的图标

Answer 1

您提供的数据看起来不错。我相信你面临的问题是每次点击按钮都会自动刷新网站，因为你的按钮被form包裹着。类型的默认按钮是submit，这就是您无法显示图像的原因。只需将其类型更改为button即可。

<button type="button" className="btn" onClick={getMemeImage}>Random img</button>