React useState钩子绑定外部图片：点击按钮无反应问题排查

你的推测没错，问题确实出在表单标签上：

• 表单内的<button>元素默认类型是submit，点击后会触发表单的默认提交行为，导致页面刷新。React组件会重新渲染，你通过setImage更新的状态会被重置回初始空字符串，所以看起来点击按钮后没有任何反应。
• 控制台能输出正确的图片URL，说明getMemeImage函数确实执行了，只是页面刷新把状态冲掉了。

两种解决方式： #

方式1：给按钮添加type="button"属性

明确指定按钮类型为普通按钮，避免触发表单提交：

import React from "react"
import memesData from "../memesData.js"

export default function Meme() {
    const [image, setImage] = React.useState("");

    function getMemeImage() {
        const memesArray = memesData.data.memes
        const randomNumber = Math.floor(Math.random() * memesArray.length)
        setImage(memesArray[randomNumber].url)
        console.log(memesArray[randomNumber].url)
    }

    return (
        <main>
            <form className="form">     
                <button 
                    className="form--button"
                    type="button" {/* 添加这行 */}
                    onClick={getMemeImage}
                >
                    Get a new meme image 🖼
                </button>
            </form>
            <img src={image} className="meme--image" />
        </main>
    )
}

方式2：在点击事件中阻止默认行为

修改getMemeImage函数，接收事件参数并调用preventDefault()：

import React from "react"
import memesData from "../memesData.js"

export default function Meme() {
    const [image, setImage] = React.useState("");

    function getMemeImage(e) { // 添加事件参数e
        e.preventDefault(); // 阻止表单默认提交行为
        const memesArray = memesData.data.memes
        const randomNumber = Math.floor(Math.random() * memesArray.length)
        setImage(memesArray[randomNumber].url)
        console.log(memesArray[randomNumber].url)
    }

    return (
        <main>
            <form className="form">     
                <button 
                    className="form--button"
                    onClick={getMemeImage}
                >
                    Get a new meme image 🖼
                </button>
            </form>
            <img src={image} className="meme--image" />
        </main>
    )
}

两种方法都能解决问题，推荐第一种，代码更简洁直观。

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