使用空数组响应组件设置状态

Question

到目前为止，我的组件尝试从API中获取数据一次，它将在数组correctAnswerArray中存储随机选择的对象(当前为10个)。我使用splice()来确保不随机选择相同的对象。我将这些随机选择的对象推送到新数组，然后尝试通过correctAnswer设置setCorrectAnswer(correctAnswerArray)状态。

当我在下一行记录状态时，状态(correctAnswer)仍然是空的。尽管如此，我不知道为什么当我所推到的correctAnswerArray中有项目时，状态是空的。任何帮助都将不胜感激。

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;

Answer 1

我认为当使用var存储和数组不反映状态变化时，您必须在setState()内部构建数组以作出反应，以注意更改，例如，--这不能正常工作--

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

但是，如果您重新构建setState 中的数组，则现在响应刷新

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

我为我的失语感到抱歉