Estoy tratando de cambiar el estado creado con el enlace useState cuando se hace clic. Pero no entiendo este error. TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'undefined'). No entiendo por qué sucede esto después de setState (state.activeQuestion + 1)
import React, {useState} from 'react' import classes from './Quiz.module.css' import ActiveQuiz from '../../components/ActiveQuiz/ActiveQuiz' export default function Quiz () { const [state, setState] = useState( { activeQuestion: 0, quiz: [ { question: 'Якого коліру небо', rightAnswerId: 2, id: 1, answers: [ {text: 'чорний', id: 1}, {text: 'синій', id: 2}, {text: 'червоний', id: 3}, {text: 'зелений', id: 4} ] }, { question: 'Якому році 2 світова', rightAnswerId: 3, id: 2, answers: [ {text: '1954', id: 1}, {text: '1948', id: 2}, {text: '1949', id: 3}, {text: '1918', id: 4} ] } ],} ) const onAnswerClickHandler = answerId => { console.log('Answer Id: ', answerId); setState(state.activeQuestion + 1) } return( <div className={classes.Quiz}> <div className={classes.QuizWraper}> <h1> Дайте відповідь на всі Питання </h1> <ActiveQuiz answers={state.quiz[state.activeQuestion].answers} question={state.quiz[state.activeQuestion].question} onAnswerClick={onAnswerClickHandler} quizLength={state.quiz.length} answerNumber={state.activeQuestion + 1} /> </div> </div> ) }en su código, con onAnswerClickHandler está cambiando la forma de su estado. Su estado es un objeto y tiene diferentes valores.
const onAnswerClickHandler = answerId => { console.log('Answer Id: ', answerId); setState(state.activeQuestion + 1) }aquí estás cambiando tu estado a un número:
state = {object stuff here}// //after you call the function state = 0 + 1 // all the other stuff is gonecomo comentó @cybercoder, debe usar el operador de propagación:
setState(prev=>({...state, activeQuestion : prev.activeQuestion + 1})) –con el operador de propagación, copia todos los datos que contiene su objeto y solo actualiza el valor necesario que desea actualizar