Estoy tratando de cambiar mi imagen cada segundo en reaccionar dentro de un mapa. Sin embargo, esto no parece estar funcionando. Aquí está mi código:
function ImageGrid() { const {shell, gridImage} = styles const squishAnimals = [ '/SquishAnimalDemo(1).png', '/SquishAnimalDemo(2).png', '/SquishAnimalDemo(3).png', '/SquishAnimalDemo(4).png', '/SquishAnimalDemo(5).png', '/SquishAnimalDemo(6).png', '/SquishAnimalDemo(7).png', '/SquishAnimalDemo(8).png', '/SquishAnimalDemo(9).png' ]; const [images, setImages] = useState(squishAnimals); const [currentImage, setCurrentImage] = useState(0); function changeBackgroundImage() { let newCurrentImg = 0; const noOfImages = images.length; if (currentImage !== noOfImages - 1) { newCurrentImg += currentImage; } setCurrentImage(newCurrentImg); } useEffect(() => { const interval = setInterval(() => changeBackgroundImage(), 1000); if (interval) { clearInterval(interval); } }); return ( <div className={shell}> {squishAnimals.map((image, index) => { return ( index === 4 ? <img className={gridImage} src={images[currentImage]} alt={`${index}-${image}`}/> : <img className={gridImage} src={image} alt={`${index}-${image}`}/> ) })} </div> );}
Cualquier ayuda sobre por qué puede no estar funcionando sería genial. Gracias :)
Creo que es porque cancelas inmediatamente el interval en useEffect. Creo que desea devolver una función de limpieza para borrar la identificación del intervalo.
function ImageGrid() { const {shell, gridImage} = styles const squishAnimals = [ '/SquishAnimalDemo(1).png', '/SquishAnimalDemo(2).png', '/SquishAnimalDemo(3).png', '/SquishAnimalDemo(4).png', '/SquishAnimalDemo(5).png', '/SquishAnimalDemo(6).png', '/SquishAnimalDemo(7).png', '/SquishAnimalDemo(8).png', '/SquishAnimalDemo(9).png' ]; const [images, setImages] = useState(squishAnimals); const [currentImage, setCurrentImage] = useState(0); function changeBackgroundImage() { let newCurrentImg = 0; const noOfImages = images.length; if (currentImage !== noOfImages - 1) { newCurrentImg += currentImage; } setCurrentImage(newCurrentImg); } useEffect(() => { const interval = setInterval(() => changeBackgroundImage(), 1000); return () => { if (interval) { clearInterval(interval); } } }); return ( <div className={shell}> {squishAnimals.map((image, index) => { return ( index === 4 ? <img className={gridImage} src={images[currentImage]} alt={`${index}-${image}`} key={images[currentImage]}/> : <img className={gridImage} src={image} alt={`${index}-${image}`} key = {`${index}-${image}`}/> ) })} </div> ); }