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时依赖状态/道具，还建议您使用更新程序功能表单。

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

Answer 2

setState函数不会立即更新状态对象。

仅当您要重新渲染组件时才使用this.setState功能。否则，只需直接更新州的财产：this.state.score++

React不立即设置状态

2 个答案: