Estoy trabajando en una aplicación de trivia usando ReactjS y cada vez que intento actualizar mi estado llamado "juego", aparece el siguiente mensaje de error:
Uncaught TypeError: game is undefined.Mi aplicación web está estructurada de la siguiente manera: Aplicación -> Pregunta -> Respuestas.
en la aplicación:
const [game, setGame] = React.useState([]); function holdAnswer(qKey) { console.log(qKey); setGame((oldGame) => { oldGame.map((element) => { return qKey === element.key ? {} : element; }); }); console.log(qKey); } React.useEffect(function () { console.log("Effect ran"); fetch("https://opentdb.com/api.php?amount=5") .then((res) => res.json()) .then((data) => setGame( data.results.map(function (element) { return { ...element, key: uniqid(), answers: arrayShuffle([ ...element.incorrect_answers.map( (x) => new AnswerObj(x, false, uniqid()) ), new AnswerObj(element.correct_answer, false, uniqid()), ]), }; }) ) ); console.log(game); }, []); var wholeQ = game.map((element) => { return ( <Question wQ={element} holdAnswer={() => holdAnswer(element.key)} /> ); });en el componente de la pregunta:
export default function Question(props) { const answers = arrayShuffle(props.wQ.answers).map((element) => { return <Answers wholeAnswer={element} holdAnswer={props.holdAnswer} />; }); return ( <div className="question"> <p>{decode(props.wQ.question)}</p> <div className="answer-buttons-wrapper">{answers}</div> </div> ); }en el componente de respuestas:
export default function Answers(props) { return ( <button className="answer-button" onClick={props.holdAnswer}> {decode(props.wholeAnswer.answer)} </button> ); }Creo que el problema radica en el siguiente bloque:
function holdAnswer(qKey) { console.log(qKey); setGame((oldGame) => { oldGame.map((element) => { return qKey === element.key ? {} : element; }); }); console.log(qKey); } Como setGame termina sin devolver nada y por lo tanto establece el estado con un valor undefined .
Para solucionar esto, podemos eliminar las llaves en setGame para convertirlo en un "retorno implícito" .
Alternativamente, podemos agregar una declaración de devolución antes de la función de mapeo.
// Either this -> setGame((oldGame) => oldGame.map((element) => { return qKey === element.key ? {} : element; }); ); // Or this -> setGame((oldGame) => { return oldGame.map((element) => { return qKey === element.key ? {} : element; }); });