Call API when "Play Again" is clicked

Viewed 10

Quiz questions and answers are coming from an api. I would like the questions and answers to be unique. I am currently putting the api in a useEffect hook. The api gets called the first time.

My idea was to wipe out the questions setQuestions([]) and then use the dependency questions.length === 0 in useEffect

Basically I need boilerplate code to show how to call the API when the new game starts.

If I call it directly as a function, then it doubles the data being returned.

I realize this is vague - if I knew how to explain it, I'd probably be able to find the answer.

I think what I'm trying to do in react is call the api multiple times, and give the useEffect hook with the proper dependency so it will re-render the quiz with new questions and answers.

Here's some code:

  useEffect(() => {
     // load from API
     fetchApi()
  }, [])

and...

   const gameStart = () => { 
    setEndGame(false)   
    setStartGame(true)
    setCurrentQuestion(0)
    setCorrectAnswers(0)    
    //fetchApi()

}

The api and the quiz work fine, but they keep recycling the same questions. If I call the API again, then I get new questions - but they add on to the current questions. I tried setting questions to [] to wipe out the questions but that's not working for some reason.

Thank you for your assistance.

0 Answers
Related