javascript - React 不立即设置状态

Question

我有一个功能，如果用户得到正确的答案，我会更新分数

首先，这是执行此操作的正确方法吗:this.setState({ Score: this.state.score + 1 } 我想可能不是

其次，这个函数会增加分数，但由于某种原因不是第一次。我很欣赏这只是一个很难理解的函数，但可以回答人们对代码的疑问:

countScore(enteredValue) {
    const { quizData, possibleAnswerTotal} = this.props;
    const { score, correctlyEnteredAnswers } = this.state;
    let index;
    let submittedValue;
    let toNum;
    submittedValue = enteredValue.toLowerCase();
    if (quizData.includes(submittedValue)) {
      correctlyEnteredAnswers.push(submittedValue);
      this.setState({ score: this.state.score + 1 }) //this works just not the first time
      index = quizData.indexOf(submittedValue);
      quizData.splice(index, 1);
      console.log(quizData, 'qd');
      this.changeBackgroundColorCorrectAnswer();
      toNum = Number(possibleAnswerTotal)
      console.log(score, 'scoressss');
      if (score != 0 && score === toNum) {
        console.log('here');
        this.quizCompleted();
      }
    } else {
      this.changeBackgroundColorInCorrectAnswer();
    }
  }

Answer 1

根据设计，setState 是异步的 - 这允许进行优化，例如批量更新、延迟对屏幕外组件的更新等。如果您想确保仅在状态实际更新后才调用某些代码，您可以传递回调作为第二个参数。出于类似的原因，如果您在调用 setState 时依赖于 state/props，还建议您使用 updater 函数形式。

this.setState((prevState, props) => {
    return {
        score: prevState.score + 1
    };
}, () => {
    console.log("state updated");
});