reactjs 为什么我的按钮不返回值,也不显示我的图像

sd2nnvve  于 2022-11-04  发布在  React
关注(0)|答案(1)|浏览(103)
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时,它不工作

dldeef67

dldeef671#

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

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

相关问题