React中使用useState钩子无法显示图片问题求助

在React中使用useState钩子，通过按钮的onClick事件处理函数调用memeData中的图片，但点击按钮后图片无法显示，控制台和终端均未出现报错信息。

输出截图：

以下是components/MemeForm.js文件的代码：

// import memeData from "../memeData"
import React from "react"
import memeData from "../memeData"


export default function MemeForm() {

    const [memeImage, setMemeImage] = React.useState("")

    function GetMemeImage() {
        const MemeArray = memeData.data.GirlImages

        const randomNumber = Math.floor(Math.random() * MemeArray.length)
        // const url = MemeArray[randomNumber].url

        setMemeImage(MemeArray[randomNumber].url)
    }

    return (
        <main>
            <form className="form">
                <div className="top-body">
                    <div className="form-inner">
                        <input type="text" placeholder="Top Text" className="form-input" />

                        <input type="text" placeholder="Bottom Text" className="form-input" />
                    </div>
                </div>

                <button onClick={GetMemeImage} className="form-button">Get a new meme image 🖼</button>
            </form>
            <img src={memeImage} className="meme--image" alt="img" />
        </main>
    )
}

memeData.js的代码：

const memeData = {
    "success": true,
    "data": {
        "GirlImages": [
            {
                "id": "1",
                "description": "Lady with a Teddy",
                "url": "https://unsplash.com/photos/n1bDxmYK_94"
            },
            {
                "id": "2",
                "description": "Girl with camera",
                "url": "https://unsplash.com/photos/JnD8e1Bx9Ck"
            },
            {
                "id": "3",
                "description": "Beautiful Girl with Glasses",
                "url": "https://unsplash.com/photos/xNbpmXAVdA8"
            },
            {
                "id": "4",
                "description": "Redhead with frackles",
                "url": "https://images.pexels.com/photos/3228213/pexels-photo-3228213.jpeg"
            },
            {
                "id": "5",
                "description": "Girl in black dress",
                "url": "https://images.pexels.com/photos/1385472/pexels-photo-1385472.jpeg"
            },
            {
                "id": "6",
                "description": "Girl Sitting on Chair",
                "url": "https://images.pexels.com/photos/4725133/pexels-photo-4725133.jpeg"
            }
        ]
    }
}

export default memeData

有两个核心问题导致图片无法正常显示：

1. Unsplash链接为网页地址，而非图片直链
   前三个url是Unsplash的图片详情页链接，不是可直接嵌入<img>标签的图片资源地址。浏览器无法将网页链接渲染为图片，需要替换为对应图片的直链（可通过Unsplash页面右键复制图片地址获取）。

2. 按钮默认触发表单提交，导致页面刷新
   放在<form>内的按钮默认类型为submit，点击后会触发表单提交，页面刷新会重置memeImage状态为空。解决方式有两种：

   • 修改按钮类型为button：

     <button type="button" onClick={GetMemeImage} className="form-button">Get a new meme image 🖼</button>
     

   • 在事件处理函数中阻止默认提交行为：

     function GetMemeImage(e) {
         e.preventDefault(); // 阻止表单默认提交
         const MemeArray = memeData.data.GirlImages
         const randomNumber = Math.floor(Math.random() * MemeArray.length)
         setMemeImage(MemeArray[randomNumber].url)
     }
     

另外，建议给<img>添加空状态处理，比如设置默认占位图：

<img src={memeImage || "https://via.placeholder.com/400"} className="meme--image" alt="meme" />

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