为什么一个 state 变量更新而另一个没有？

Question

I am brand new to React and I thought I was doing this correctly. I am trying to keep score for a trivia game I'm developing. When I set state, the score is updating but the number of correct responses is not. Interestingly, this is only the case when I deploy the site to firebase, it works as expected when served locally.

This function is in the parent game component. this.state.points is incrementing, this.state.numberCorrect/Incorrect is not.

childSubmitAnswer(dataFromChild) {
  if (dataFromChild.correct === true) {
    this.setState((prevState) => {
      return {
        numberCorrect: prevState.numberCorrect++,
        points: prevState.points + dataFromChild.points
      }
    });
  } else {
    this.setState((prevState) => {
      return {
        numberIncorrect: prevState.numberIncorrect++,
        points: prevState.points - dataFromChild.points
      }
    });
  }
  console.log(this.state.numberCorrect);
}

This is the function called in the child component which is displaying the question.

handleSubmit(event) {
  event.preventDefault();
  let verification = new AnswerVerification();
  this.answerSubmitted();
  if (verification.verifyAnswer(this.state.submissionValue, this.state.answer)) {
    let data = {
      correct: true,
      points: this.props.points
    }
    this.props.childSubmitAnswer(data);
  } else {
    let data = {
      correct: false,
      points: this.props.points
    }
    this.props.childSubmitAnswer(data);
  }
}

Answer 1

Ciao, I think the problem is on childSubmitAnswer function. Try to modify it like that:

childSubmitAnswer(dataFromChild) {
  if (dataFromChild.correct === true) {
  this.setState((prevState) => {
  return {
    numberCorrect: prevState.numberCorrect + 1,
    points: prevState.points + dataFromChild.points
  }
});
} else {
  this.setState((prevState) => {
    return {
      numberIncorrect: prevState.numberIncorrect + 1,
      points: prevState.points - dataFromChild.points
    }
  });
}
console.log(this.state.numberCorrect);
}

Explanation: in Javascript when you use ++ after the operand, the value will be returned before the operand is increased. Example:

let a = 0;
console.log(a++); // shows 0
console.log(a);   // shows 1