Estoy creando un sitio web de prueba como práctica para React y quiero poder cambiar la pregunta con un botón. Cuando cambio useState (0) manualmente a 1, se muestra el siguiente objeto. Pero no puedo hacer que funcione con el botón. Cuando hago clic en el botón, salta directamente al mensaje de alerta.
function GetMovies() { useEffect(() => { fetchItems(); }, []); const [items, setItems] = useState({ options: [] }); const fetchItems = async () => { const data = await fetch("http://localhost:5000/api/movies"); const items = await data.json(); //test //console.log(items[currentQuestion]); setItems(items[currentQuestion]); }; const [currentQuestion, setCurrentQuestion] = useState(0); //change question solution that dont work const HandleAnswerButtonClick = () => { const nextQuestion = setCurrentQuestion + 1; if (nextQuestion < items.length) { setCurrentQuestion(nextQuestion); } else { alert("End of quiz"); } setCurrentQuestion(nextQuestion); }; return ( <div className="App"> <h1>Quiza</h1> <div> <span>Question 1</span> </div> <div> <h3>Question: {items.description}</h3> {items.options.map((c) => ( <button value={c.is_correct} key={c.text}> {c.text} </button> ))} <div> {//Next BUTTON} <button onClick={() => HandleAnswerButtonClick()}> Next question </button> </div> {/* if-sats, om bild finns till frågan visas den, annars en class med display none */} <div className="Q_pics"> {items.options.map((c) => !c.image ? ( <p className="Display_none">empty</p> ) : ( <img src={c.image} alt={c.text}></img> ) )} </div> </div> </div> ); }El esquema de mangosta de mi API
const MovieSchema = mongoose.Schema( { category: { type: String, required: true }, description: { type: String, required: true }, image: { type: String, required: false, }, options: [ { text: { type: String, required: true, }, is_correct: { type: Boolean, required: true, default: false, }, image: { type: String, required: false, }, }, ], }, { collection: "movies" } );Eso es porque
const nextQuestion = setCurrentQuestion + 1;debiera ser
const nextQuestion = currentQuestion + 1; Ah, y como @Nick Parsons mencionó en un comentario, también solo almacena la primera pregunta en su estado, ya que fetchItems solo se ejecuta una vez, y usted hace setItems(items[currentQuestion]);
deberías hacer algo como
function GetMovies() { const [items, setItems] = useState([]); const [currentQuestion, setCurrentQuestion] = useState(0); const fetchItems = async () => { const data = await fetch("http://localhost:5000/api/movies"); const items = await data.json(); //test //console.log(items[currentQuestion]); setItems(items); }; //change question solution that dont work const HandleAnswerButtonClick = () => { const nextQuestion = currentQuestion + 1; if (nextQuestion < items.length) { setCurrentQuestion(nextQuestion); } else { alert("End of quiz"); } setCurrentQuestion(nextQuestion); }; useEffect(() => { fetchItems(); }, []); const activeQuestion = items[currentQuestion]; return ( <div className="App"> <h1>Quiza</h1> <div> <span>Question {currentQuestion + 1}</span> </div> <div> <h3>Question: {activeQuestion && activeQuestion.description}</h3> {activeQuestion && activeQuestion.options.map((c) => ( <button value={c.is_correct} key={c.text}> {c.text} </button> ))} <div> {//Next BUTTON} <button onClick={() => HandleAnswerButtonClick()}> Next question </button> </div> {/* if-sats, om bild finns till frågan visas den, annars en class med display none */} <div className="Q_pics"> {activeQuestion && activeQuestion.options.map((c) => !c.image ? ( <p className="Display_none">empty</p> ) : ( <img src={c.image} alt={c.text}></img> ) )} </div> </div> </div> ); }el código podría ser así:
const [items, setItems] = useState({ options: [] }); // currentIdx might be a better name const [currentIdx, setCurrentIdx] = useState(0); const fetchItems = async () => { const data = await fetch("http://localhost:5000/api/movies"); const items = await data.json(); // save all data as Nick said. and items should be type of Data[]; setItems(items); }; const HandleAnswerButtonClick = () => { const nextQuestion = currentIdx + 1; if (nextQuestion < items.length) { setCurrentIdx(nextQuestion); } else { alert("End of quiz"); } }; // use displayItem for render const displayItem = useMemo(() => items[currentIdx], [items, currentIdx]);será mejor que aprendas a usar herramientas de desarrollo y observes los valores de tu código, creo 😂