异步状态与输入反应

debugcn 发表于 Dev

机警的

我的状态有问题，每次都迟到。该应用程序包括用英语或法语检查您的词汇表，但我遇到了一个问题，即状态currentAnswer总是迟到一个字符且句子“正确！”。仅在我再写一个字符时显示。我无法解决问题。我只能猜测状态不是异步的，但我不能使其异步。任何想法？

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;

adxl

实际上，setState()方法是异步的，不会总是立即更新。
但是要修正您的验证，只需将单词与当前输入而不是state中的当前答案进行比较：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。