React component setting state with an empty array

Question

So far with my component, I'm trying to fetch data from an API once, which will store a random selection (currently 10) of objects in an array correctAnswerArray. I use splice() to ensure that the same object isn't randomly chosen. I push these randomly selected objects to the new array, and then attempt to set state correctAnswer by setCorrectAnswer(correctAnswerArray).

When I log the state on the next line, the state (correctAnswer) is still empty. With that said, I'm unsure why the state is empty when the correctAnswerArray I pushed to has items inside of it. Any help would be appreciated.

import React, { useState, useEffect } from 'react'
import axios from 'axios';

const URL = 'https://restcountries.com/v3.1/all';

const Game = () => {

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [currentChoices, setCurrentChoices] = useState([]);
  const [correctAnswer, setCorrectAnswer] = useState([]);
  const [score, setScore] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(URL);
      console.log(res);
      const correctAnswerArray = [];
    
      for (let i = 0; i < 10; i++) {
        let country = res.data[Math.floor(Math.random() * res.data.length)];
        let idx = res.data.indexOf(country);
        res.data.splice(idx, 1);
        correctAnswerArray.push(country);
      }
      
      console.log(correctAnswerArray);
      console.log(res.data.length);
      setCorrectAnswer(correctAnswerArray);
      console.log(correctAnswer);
    }
    fetchData();
  }, [])

  useEffect(() => {

  }, [currentQuestion])

  return (
    <div className='container'>
      <div>
        <div className='bg-white p-8 rounded shadow mb-4'>
          <p className='text-2xl'>
            What is the capital of COUNTRY_CORRECT ANSWER?
          </p>
        </div>
        <div className='flex flex-wrap mt-4 justify-around'>
          <button className='bg-white w-5/12 p-4 text-black font-semibold rounded shadow mb-4
          transition duration-300 ease-in-out hover:scale-110'>
            CHOICE 1
          </button>
          <button className='bg-white w-5/12 p-4 text-black font-semibold rounded shadow mb-4
          transition duration-300 ease-in-out hover:scale-110'>
            CHOICE 2
          </button>
          <button className='bg-white w-5/12 p-4 text-black font-semibold rounded shadow mb-4
          transition duration-300 ease-in-out hover:scale-110'>
            CHOICE 3
          </button>
          <button className='bg-white w-5/12 p-4 text-black font-semibold rounded shadow mb-4
          transition duration-300 ease-in-out hover:scale-110'>
            CHOICE 4
          </button>
        </div>
        <p className='text-center text-xl'>{score} / 10</p>
      </div>
    </div>
  )
}

export default Game;

You can't immediately log a change in state because the process of updating a state is asynchronous. You may need `useEffect(() => console.log(correctAnswer), [correctAnswer]);` to watch for a change in that state, and then log it. — Andy, Jun 02 '22 at 08:14
`correctAnswer` does not update after running `setCorrectAnswer(correctAnswerArray)` until the next component render happens. You have access to the data through the `correctAnswerArray` variable in the mean time. — 3limin4t0r, Jun 02 '22 at 09:27

score 0 · Answer 1 · answered Jun 02 '22 at 09:04

I think when using a var to store and array dosnt reflect the change of state, you have to build the array inside the setState() for react to notice the change, for example this not work properly:

function lalaland () {
  newArray = statedArray;
  newArray[newArray.length] = "new Value";
  setStatedArray(newArray);
}

but if you rebuild the array inside the setState now react refresh:

function lalaland () {
  newArray = statedArray;
  newArray[newArray.length] = "new Value";
  setStatedArray([...newArray]);
}

I`m sorry for my broken english LOL

React component setting state with an empty array

1 Answers1