ReactJS 組件 state 呈現更改但隨后立即恢復為初始 state

Question

我剛剛開始按照本教程使用 React 學習前端開發。 一切都很好，直到我來到 props & state 學習部分。

在本節中，我應該構建一個模因生成器頁面。 一切順利，我按照教程的指示進行了操作。 但是，當我單擊按鈕更改 meme 圖像時，它沒有用。 圖像與初始圖像保持相同（初始圖像 URL 值/狀態），即使我的代碼與我在教程中看到的沒有太大區別。

這是我的模因生成器組件的代碼：

import React from 'react'
import './style.css'
import memesData from "./constants/MemeDB"

function Meme() {

    const [meme, setMeme] = React.useState({
        topText: "",
        bottomText: "",
        randomImage: "https://i.imgflip.com/30b1gx.jpg",
        imageAlt: "Drake Hotline Bling"
    })

    const [allMemeImage, setAllMemeImage] = React.useState(memesData)
    
    function getNewMeme() {
        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
        }))
    }

    return (
        <main>
            <form className='form'>
                <input
                    type="text"
                    className='form--input'
                    placeholder='Top text'
                />
                <input
                    type="text"
                    className='form--input'
                    placeholder='Bottom text'
                />
                <button onClick={getNewMeme} className='form--button'>Get a new meme image 🖼</button>
            </form>
            <img src={meme.randomImage} alt={meme.imageAlt} className='meme-image' />
        </main>
    )
}


export default Meme

有關其他信息，我通過 npx npx create-react-app命令使用 Microsoft VSCode 而不是 Scrimba 在本地構建頁面。

我嘗試在getNewMeme function 中添加console.log(randomNumber)和console.log(url)以確保單擊按鈕時值是否發生變化。 然后，我發現這些值實際上發生了變化。 但是，每次我單擊該按鈕時， randomNumber和url的值只會在控制台上顯示一瞬間，然后控制台會再次自動清除。 有時，在頁面上，當我單擊按鈕時，我可以看到模因圖像在恢復到初始圖像/狀態之前發生了變化。 這里有什么問題？

如果我不能正確描述問題，我很抱歉。

Answer 1

問題是，您在每次單擊按鈕后刷新頁面。 要解決此問題：

function getNewMeme(event) { // <--- Accept the `event` parameter here
  event.preventDefault(); // <--- Prevent the default behavior of form submission, which is refreshing the page
  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,
  }));
}

如何？ 這與 React 無關，而是 HTML。默認情況下， <button>的類型為submit ，如果放在表單內，單擊時會自動提交表單。 同樣默認情況下，表單提交將導致頁面重新加載。 我們要防止這種行為。

參考：

• 按鈕type ： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type