Запуск функции по щелчку возвращает значения устаревшего состояния React Hooks - PullRequest
Новая
       19

Запуск функции по щелчку возвращает значения устаревшего состояния React Hooks

0 голосов
/ 10 октября 2019

Я преобразую компонент класса в функциональный компонент с помощью React Hooks в приложении, которое запускает определенную функцию по щелчку. Функция ссылается на значения состояния, но значения состояния в функции устарели, и это приводит к сбою приложения.

Я видел похожие вопросы о StackOverflow, но большинство функций onClick выполняют только одно, поэтому их использование useRef или useCallback кажется намного проще для реализации. Как я могу убедиться, что функция checkAnswer использует обновленные значения состояния? 

 const Find = props => {
  const [currentCountry, setCurrentCountry] = useState(null)
  const [guesses, setGuesses] = useState(null)
  const [questions, setQuestions] = useState([])

EDIT

Хук setCurrentCountry вызывается в функции takeTurn, которая выполняется вначало игры. 

  const takeTurn = () => {
            !props.isStarted && props.startGame();
            let country = getRandomCountry();
            console.log(country)
            setGuesses(prevGuess => prevGuess + 1)
            setCurrentCountry(country)
            console.log('setting currentCountry')
            getAnswers(country)
            let nodes = [...(document.getElementsByClassName("gameCountry"))];
            nodes.forEach( node => {
              node.removeAttribute("style")
            })
            if(questions && questions.length === 10){
                console.log('opening modal')
                props.handleOpen();
                // alert("Congrats! You've reached the end of the game. You answered " + props.correct + " questions correctly and " + props.incorrect + " incorrectly.\n Thanks for playing");
                console.log('ending game')
                props.gameOver && endGame();

            }


  const getAnswers = (currentCountry) => {
      console.log(currentCountry)
        let answerQuestions;
        if(questions){
          answerQuestions = [...questions]
        }
        let question = {};
        question['country'] = currentCountry;
        question['correct'] = null;
        let answers = [];
        currentCountry && console.log(currentCountry.name);
        console.log(currentCountry)
        currentCountry && answers.push({
            name: currentCountry.name.split(';')[0],
            correct: 2
        });
        console.log(answers)
        answerQuestions.push(question);
        setQuestions(answerQuestions)
    }
  const checkAnswer = (e, country) => {
        let checkquestions = questions;
        let question = checkquestions.find(question => question.country === currentCountry);
        let checkguesses = guesses;
        console.log(e)
        console.log(country)
        console.log(currentCountry)
        if(!props.isStarted){
          return
        }
        if((country === currentCountry.name || country === currentCountry.name) || guesses === 4){
            props.updateScore(3-guesses);
            console.log(question);
            if(guesses === 1){
                question['correct'] = true;
            }
            checkguesses = null;
            setTimeout(() => takeTurn(), 300);   
        } else {
            question['correct'] = false;
            checkguesses ++
            if(guesses === 3){
              getCountryInfo(e, currentCountry.name);
            }
        }
        setGuesses(checkguesses)
        props.handlePoints(questions);
    }

Отображаемые данные с помощью onClick: 

          <Geographies  geography={data}>
            {(geos, proj) =>
              geos.map((geo, i) =>
              <Geography
                data-idkey={i}
                onClick={((e) => checkAnswer(e, geo.properties.NAME_LONG))}
                key={i}
                geography={geo}
                projection={proj}
                className="gameCountry"       
              />
            )
            }
          </ Geographies>
          </ZoomableGroup>

Приложение останавливается, поскольку значения состояния currentCountry по-прежнему считываются нулевыми.

...