I made a little QuizApp with react-native typescript and a nestjs backend and a mysql database. But I don't want to have repeated Questions. My idea here is i want to get the whole questionlist here in getQuestionList and then get a random index depending on how long the questionList is get the id out of the question/index and delete it so i can't get the same question again and then put it into getQuestions and getAnswers(API Calls) to get the question and the answers by the questionId. But I'm getting the questions more then once. Can someone fix this code/help me?
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: {questionId: number, answer: string, id: number, right: boolean}[] }>(); const [questionList, setQuestionList] = useState<{question: string, id: number}[]>([]); const [number, setNumber] = useState<number>(); const [qId, setQId] = useState<number>(); const getQuestionList = async () => { return await QuestionManager.getQuestions() .then((response) => { setQuestionList(response); }) .then(() => { setLoaded(true); }) .then(() => { quizReset(); }) .catch((e) => console.log(e, 'QUESTIONLIST')); }; useEffect(() => { (async () => { await getQuestionList(); })(); }, []); useEffect(() => { (async () => { if (questionNumber === 1) { getNumber(); if (qId) { setAnswered(false); return setQuiz({ question: await getQuestion(qId), answers: await getAnswer(qId) }); } })(); } }, [questionList, loaded]); const getQuestion = async (id: number) => { const quest = await QuestionManager.getQuestion(id); return quest.question; }; const getAnswer = async (id: number) => { return await AnswerManager.getAnswers(id); }; const getNumber = () => { const num = Math.floor(Math.random() * questionList.length); if (num) { const qid = questionList[num].id; setNumber(num); questionList.splice(num, 1); return qid; } }; useEffect(() => { (async () => { await setQId(getNumber()); })(); }, [questionList, questionNumber]); const quizReset = async () => { await setQId(getNumber()); if (qId) { setReset(true); setAnswered(false); return setQuiz({ question: await getQuestion(qId), answers: arrayShuffle(await getAnswer(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> );};