Tengo un juego de preguntas en el que tienes que recordar los elementos (de las imágenes) y responder la prueba. Primero, se muestran 4 imágenes con un intervalo de tiempo de 2 segundos y luego comenzarán las 4 pruebas. Tengo el componente Imágenes (que muestra imágenes en intervalos) y el componente Cuestionario. Quiero ocultar el componente de imágenes una vez que haya terminado y mostrar el cuestionario. Intenté hacerlo usando renderizado condicional pero no funciona.
import { useState, useEffect } from "react"; import Quiz from "./Quiz.js"; import Images from "./Images"; import "./styles.css"; const images = [ "https://picsum.photos/id/1/200/300", "https://picsum.photos/id/2/200/300", "https://picsum.photos/id/3/200/300", "https://picsum.photos/id/4/200/300" ]; export default function App() { const [image, setImage] = useState(); const [showImages, setShowImages] = useState(true); const [showQuestions, setShowQuestions] = useState(false); useEffect(() => { const function1 = () => images.forEach((c, i) => setTimeout(() => setImage(c), i * 2000)); function1(); //setShowImages(false); }, []); return ( <div className="App"> <div className="screen"> {showImages && <Images image={image} />} {showQuestions && <Quiz />} </div> </div> ); }Enlace de Codesanbox: https://codesandbox.io/s/elastic-snowflake-qo1nz7?file=/src/App.js
Espero que esto resuelva tu problema.
useEffect(() => { setShowQuestions(false); setShowImages(true); const function1 = () => images.forEach((c, i) => setTimeout(() => setImage(c), i * 2000)); function1(); setTimeout(() => { setShowImages(false); setShowQuestions(true); }, images.length * 2000); }, [])Aquí hay un enlace de codesandbox https://codesandbox.io/s/wizardly-elion-4dh35s?file=/src/App.js
Una forma simple es mantener la lógica showQuestions una vez que se carga la última imagen.
const function1 = () => images.forEach((c, i) => { setTimeout(() => { setImage(c) if(i == images.length - 1) { setTimeout(() => { setShowImages(false); setShowQuestions(true); }, 1000) } }, i * 2000) });También puede probar la lógica de contenedor simple con promesa.
useEffect(() => { const function1 = () => new Promise(res => { images.forEach((c, i) => setTimeout(() => { setImage(c); if(i === images.length - 1) { res(); } }, i * 2000)); }); function1().then(() => { setTimeout(() => { setShowImages(false); setShowQuestions(true) }, 2000) }); }, []);para una solución rápida, puede hacerlo así https://codesandbox.io/s/romantic-paper-bzknn8
useEffect(() => { const function1 = () => images.forEach((c, i) => setTimeout(() => { setImage(c); if (i == 3) { setShowImages(false); setShowQuestions(true); } }, i * 2000) ); function1(); //setShowImages(false); }, []);