React组件状态更新后立即回退初始值 按钮切换meme图片失效

你遇到的是非常典型的表单默认行为导致的问题：你把切换meme的按钮放在了<form>标签内部，而HTML规范中，位于表单内的按钮如果没有显式指定type属性，默认type值就是submit。点击这类按钮时，浏览器会自动触发表单提交动作，直接导致页面重新加载。
页面刷新后React组件会重新挂载，所有useState声明的状态都会回到你定义的初始值，浏览器控制台也会因为页面跳转清空之前打印的所有日志，和你描述的「点击后图片短暂切换、控制台日志闪一下就消失，最终回到初始状态」的现象完全一致。
教程里的代码在Scrimba平台能正常跑，是因为在线沙箱环境默认拦截了表单提交的页面刷新行为，你本地用npx create-react-app搭建的是标准React项目，没有做这层特殊拦截，所以才会暴露这个问题，和你写的状态更新逻辑没有关系。

二选一即可：

• 方案1：给按钮显式声明type="button"，明确告诉浏览器这个按钮不触发表单提交，修改后的按钮代码：

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

• 方案2：在点击事件处理函数中阻止默认行为，给getNewMeme传入事件对象，调用preventDefault()方法拦截提交动作：

function getNewMeme(e) {
    e.preventDefault()
    const memesArray = allMemeImage.data.memes
    const randomNumber = Math.floor(Math.random() * memesArray.length)
    const url = memesArray[randomNumber].url
    const name = memesArray[randomNumber].name
    setMeme(prevMeme => ({
        ...prevMeme,
        randomImage: url,
        imageAlt: name
    }))
}

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