I made a little QuizApp in which I'm getting the Questions and Answers per API out of a mysql database. What my problem with this code is that right now he is not waiting for qId. qId is undefined so the API get me this error. Then I want to execute getAnswer and getQuestion. After the questions and answers "arrive" I want to fill out the QuizHas anybody a idea how to fix this mess? Thank you!
Error I'm getting right now:
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'questionList[number].id')]
Appearing in getNumber().
const [questionNumber, setQuestionNumber] = useState<number>(1); const [reset, setReset] = useState<boolean>(false); const [answered, setAnswered] = useState<boolean>(false); const [quiz, setQuiz] = useState<{ question: string; answers: AnswersDTO[] }>(); const [questionList, setQuestionList] = useState<QuestionDTO[]>([]); const [qId, setQId] = useState<number>(); const getQuestionList = async () => { return await QuestionManager.getQuestions() .then((response) => { setQuestionList(response); }) .catch((e) => console.log(e, 'QUESTIONLIST')); }; useEffect(() => { (async () => { await getQuestionList(); })(); }, []); const getQuestion = async () => { const quest = await QuestionManager.getQuestion(qId); return quest.question; }; const getAnswer = async () => { return await AnswerManager.getAnswers(qId); }; const getNumber = async () => { const number = Math.floor(Math.random() * questionList.length); if (number) { await setQId(questionList[number].id); questionList.splice(number, 1); return quizReset(); } }; const quizReset = async () => { setReset(true); setAnswered(false); return setQuiz({ question: await getQuestion(), answers: arrayShuffle(await getAnswer()) }); }; const count = () => { setTimeout(() => { return setTimeInSeconds(timeInSeconds - 1); }, 1000); }; const timesUp = () => { setTimeout(() => { return goToFinish(); }, 1000); }; useEffect(() => { if (questionList) { if (timeInSeconds > 0 && !reset) { return count(); } if (timeInSeconds > 0 && reset) { setTimeInSeconds(20); setReset(false); return; } return timesUp(); } }, [timeInSeconds, questionList]); useEffect(() => { (async () => { await getNumber(); await getHighscore(); })(); }, [questionNumber, questionList]); useEffect(() => { (async () => { await quizReset; })(); }, [questionList, qId]); const goToWin = () => { return setTimeout(() => { navigation.push('Win'); }, 3000); }; const goToFinish = () => { return setTimeout(() => { navigation.push('Finished'); }, 3000); }; if (!questionList) { return <View />; } return (<SafeAreaView style={styles.container}> {quiz && questionList ? (<><View style={styles.questionPosition}><QuestionCard question={quiz.question} number={questionNumber} /></View> {quiz.answers.map((answer, key) => { return (<View key={key} style={styles.answer}><QuestionButton onClick={async () => { setAnswered(true); if (answer.right) { if (questionList.length === 0) { return goToWin(); } return setTimeout(() => { setQuestionNumber(questionNumber + 1); setAnswered(false); return quizReset(); }, 1000); } else { return goToFinish(); } }}> {answer.answer}</QuestionButton></View> ); })}</> ) : (<></> )}</SafeAreaView> );};