Using async/promise with useeffect

Question

I have json file which i load and i use Hook to SetState to it. After SetState i want to use state with Value of Json to my function. But my function is executing with null value because setState doesnt load before Execute function. Here is code

 const fetchQuestions = async () => {
        const data = await require("../../question.json");
        await setQuestions(
            data.map((item: IQuestion) => ({
                    id: item.id,
                    question: item.question,
                    answers: item.answers
                })
            ))
        await setQuestionsArray(
            data.map((item: IQuestion) => ({
                    id: item.id,
                    name: item.question
                })
            ))
        return questionsArray
    }

There is Function which i pass questionArray :

 const handleQuest = (array: Array<IArrayQuestion>) => {
        if (array.length > 0) {
            const numberArray = array.length
            const random = Math.floor(Math.random() * (numberArray - 0))
            const p = (array[random])
            setQuestion(p.name)
            setShuffleRandom(!shuffleRandom)
        }
    }

And i use it in useEffect

useEffect(() => {
        if (nick.length < 1) {
            navigate('/quiz')
        }
        fetchQuestions().then((res)=>{
            if (questionsArray.length > 0){
                handleQuest(res)
            }
            else{console.log("Nothing")}
        })
    }, [])

It still doesnt work. I dont have value in my function after promise

You can't `await` a setState call, and you can't use the updated state value in the same render cycle. — pilchard, Jun 18 '22 at 10:17
Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — pilchard, Jun 18 '22 at 10:19
also: [How to call an async function inside a UseEffect() in React?](https://stackoverflow.com/questions/56838392/how-to-call-an-async-function-inside-a-useeffect-in-react) — pilchard, Jun 18 '22 at 10:20
You can save the array that you pass to `setQuestionsArray` to a variable and return that variable from `fetchQuestions`, then, you can use `res` instead of `questionsArray` when the `fetchQuestions` promise is fulfilled. — Titus, Jun 18 '22 at 10:23

Mulan · Answer 1 · 2022-06-19T04:22:36.067

Separate data fetching logic from your application components. First write fetchQuestions -

async function fetchQuestions() {
  const data = await require("../../questions.json")
  return data.map(item => ({
    id: item.id,
    question: item.question,
    answers: item.answers
  })
}

Your component shouldn't copy data to multiple states. There should be a single source of truth. You don't need multiple question arrays or a copy of the current question. Instead use derived (computed) state to reference the "current" question -

import { fetchQuestions } from "./api"

function MyComponent() {
  const [questions, setQuestions] = useState([])
  const [current, setCurrent] = useState(0)
  
  useEffect(async _ => {
    try {
      const q = await fetchQuestions()
      setQuestions(q)
      setCurrent(Math.floor(Math.random() * q.length)))
    }
    catch (err) {
      console.error(err.message)
    }
  ), [])

  return <div>
    <Question question={questions[current]} />
  </div>
}

Your Question component would look something like this -

function Question({ question }) {
  return <div data-question-id={question.id}>
    Q: {question.name}
    {question.answers.map((answer, key) =>
      <Answer key={key} answer={answer} />
    )}
  </div>
}

Write the Answer component, and so on ...

score -1 · Answer 2 · edited Jun 18 '22 at 10:28

You need to add questionsArray in useEffect dependencies, but because it's a state, you should do it in two useEffects:

first fetch data:

useEffect(() => {
    if (nick.length < 1) {
        navigate('/quiz')
    }
    fetchQuestions()
}, [])

And in second useEffect:

useEffect(() => {
    if (questionsArray.length > 0){
        handleQuest(questionsArray)
    }
    else{console.log("Nothing")}
}, [questionsArray])

when questionsArray is in useEffect dependencies, with every fetch, it will refresh and new questions will be added.

Using async/promise with useeffect

2 Answers2