Acabo de empezar a aprender desarrollo frontend usando React siguiendo este tutorial . Todo va bien hasta que llegué a la sección de apoyos y aprendizaje estatal.
En esta sección, se suponía que debía construir una página generadora de memes. Todo salió bien, seguí las instrucciones del tutorial. Sin embargo, cuando hice clic en el botón para cambiar la imagen del meme, no funcionó. La imagen permaneció igual que la imagen inicial (con el valor/estado de la URL de la imagen inicial), aunque mi código no difería mucho de lo que he visto en el tutorial.
Aquí está mi código para mi componente generador de memes:
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 Para obtener información adicional, construyo la página localmente usando Microsoft VSCode, en lugar de Scrimba, a través del npx create-react-app .
Traté de agregar console.log(randomNumber) y console.log(url) dentro de la función getNewMeme para asegurarme de que los valores cambiaran si hacía clic en el botón. Luego, descubrí que esos valores realmente cambiaron. Sin embargo, cada vez que hago clic en el botón, los valores de randomNumber y la url solo se muestran en la consola durante una fracción de segundo antes de que la consola se borre automáticamente de nuevo. También a veces, en la página, cuando hacía clic en el botón, podía ver un vistazo de la imagen del meme cambiada antes de volver a la imagen/estado inicial. ¿Cuál es el problema aquí?
Lo siento si no pude describir el problema correctamente.
El problema es que está actualizando la página después de cada clic en el botón. Para arreglar esto:
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, })); } ¿Cómo? Esto no está relacionado con React, sino con HTML. De forma predeterminada, un <button> tiene el tipo de submit y, si se coloca dentro de un formulario, enviará automáticamente el formulario cuando se haga clic en él. Nuevamente, de forma predeterminada, el envío del formulario hará que la página se vuelva a cargar. Queremos prevenir este comportamiento.
Referencia: