Асинхронное состояние с входом в реакцию

Question

У меня проблема с моим состоянием, которое каждый раз поздно. Приложение состоит в проверке вашего словарного запаса на английском или английском языках, но я столкнулся с проблемой, что StateAnswer всегда опаздывает на один символ и предложение «Исправьте!» отображается только если я напишу еще один символ. Я не могу решить проблему. Все, что я могу догадаться, это то, что состояние не асинхронное, но я не могу сделать его асинхронным. Любая идея?

import React from 'react';
import './App.css';

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      words: [
        {
          francais: 'bonjour',
          anglais: 'hello',
        },
        {
          francais: 'manger',
          anglais: 'eat',
        },
        {
          francais: 'avoir',
          anglais: 'have',
        },
        {
          francais: 'faire',
          anglais: 'do',
        },
        {
          francais: 'jouer',
          anglais: 'play',
        }
    ],
    key: -1.4,
    currentWord: '',
    currentAnswer: '',
    correctAnswer: false,
    giveUp: false,
    currentScore: 0,
    scoreTotal: 0
    }
  }

  generateWord = () => {
    let index = Math.floor(Math.random() * (this.state.words.length + 1))
    if(index === this.state.key) {
      this.generateWord()
    }
    this.setState({currentWord: this.state.words[index]})
    this.setState({key: index})
  }

  validate = (e) => {
    e.preventDefault()
    const answer = e.target.value
    this.setState({ currentAnswer: answer})
    if (this.state.currentAnswer === this.state.currentWord.anglais) {
      this.setState({correctAnswer : true})
    }
  }

  showCorrection = (e) => {
    e.preventDefault()
    this.setState({giveUp: true})
    this.setState({scoreTotal: this.state.scoreTotal + 1})
  }

  nextWord = (e) => {
    e.preventDefault()
    this.setState({currentAnswer: ''})
    this.setState({ giveUp: false })
    this.setState({ correctAnswer: false })
    this.generateWord()
    if(this.state.correctAnswer) {
      this.setState({currentScore: this.state.currentScore + 1})
      this.setState({scoreTotal: this.state.scoreTotal + 1})
    }
  }

  componentDidMount() {
    this.generateWord()
  }

  render() {
    return (
      <div className="App">
        <p>Score: {this.state.currentScore}/{this.state.scoreTotal}</p>
        <h2 style={{
          color: "midnightblue",
          fontSize: "50px"
        }}>{this.state.currentWord?.francais}</h2> 
        <form action="">
          <input onChange={this.validate} value={this.state.currentAnswer} type="text" placeholder="Entrez la traduction anglaise"/>
          <button className="validation" onClick={this.showCorrection}>Give up</button>
          <button className="validation" onClick={this.nextWord}>Next</button>
        </form>      
        {this.state.correctAnswer ? <p>Correct !</p> : this.state.giveUp ? <p>La bonne réponse était: {this.state.currentWord?.anglais}</p>: ''}
      </div>
    )
  }
}

export default App;

Answer 1

Действительно setState() метод является асинхронным c и не всегда будет обновляться немедленно.
Но чтобы исправить вашу проверку, просто сравните слово с текущим вводом вместо текущего ответа в состоянии:

validate = (e) => {
    e.preventDefault()
    const answer = e.target.value
    this.setState({ currentAnswer: answer})
    if (answer === this.state.currentWord.anglais) {
      this.setState({correctAnswer : true})
    }
  }