React测验应用问题：测验完成后正确分数无法正常显示

核心问题 #

你的代码存在两个关键问题导致最终分数显示不准确：

1. 最后一题得分未被计入：当前逻辑仅在「非最后一题」时执行加分操作，若最后一题答对，完全没有触发setScore更新，最终分数自然少了这一分。
2. 异步状态的滞后性：即便最后一题加了分，直接用score状态拼接反馈时，由于setScore是异步更新，此时score仍为旧值，无法获取最新分数。

修复思路与代码调整 #

修改handleSubmission函数，先统一判断当前题的得分情况，再根据是否为最后一题处理后续逻辑：

const handleSubmission = () => {
  // 先判断当前题是否答对，计算出最新分数值
  const isCorrect = selectedOption === questions[currentQuestionIndex].correct;
  const newScore = isCorrect ? score + 1 : score;

  // 处理非最后一题的场景
  if (currentQuestionIndex < questions.length - 1) {
    setScore(newScore);
    setFeedback(isCorrect ? 'Correct!' : 'Incorrect!');
    setCurrentQuestionIndex(currentQuestionIndex + 1);
  } else {
    // 最后一题直接用计算好的newScore，避开异步状态的滞后问题
    setScore(newScore);
    setFeedback(`Quiz Complete! You scored ${newScore} out of ${questions.length}!`);
  }
};

额外优化方案 #

如果担心score状态和计算的newScore出现不一致（比如中间有其他状态更新干扰），可以借助setScore的回调函数获取实时最新值，再处理最后一题的反馈：

const handleSubmission = () => {
  const isCorrect = selectedOption === questions[currentQuestionIndex].correct;

  if (currentQuestionIndex < questions.length - 1) {
    setScore(prev => prev + (isCorrect ? 1 : 0));
    setFeedback(isCorrect ? 'Correct!' : 'Incorrect!');
    setCurrentQuestionIndex(currentQuestionIndex + 1);
  } else {
    // 通过回调拿到最新的prevScore，计算最终分数后再更新反馈
    setScore(prev => {
      const finalScore = prev + (isCorrect ? 1 : 0);
      setFeedback(`Quiz Complete! You scored ${finalScore} out of ${questions.length}!`);
      return finalScore;
    });
  }
};

以上方案彻底规避了异步状态更新的滞后问题，同时确保最后一题的得分被正确计入最终结果。

内容的提问来源于stack exchange，提问作者Vaibhav K.