Bootstrap答题应用异常：错误选项红色背景无法显示求助

核心问题：错误答案未触发状态更新 #

你的checkCorrectAnswer函数里，只有当用户选择正确答案（selected为true）时，才会执行setSelectedAnswer设置状态；选错误答案时selected是false，根本进不了if(selected)分支，selectedAnswer永远不会被设为wrong，导致红色背景的触发条件永远不成立。

修复后的checkCorrectAnswer函数 #

const checkCorrectAnswer = (selected) => {
  setShowNextBtn(true);
  // 无论对错都更新selectedAnswer状态
  setSelectedAnswer(selected ? 'correct' : 'wrong');
  if (selected) {
    setScore((prev) => prev + 1);
  }
  setDisabledBtn(true);
};

可选优化：简化className条件逻辑 #

原嵌套条件可读性较差，可调整为更直观的写法：

className={`btn border w-100 mt-1 ${
  (selectedAnswer === 'correct' && item.correct) ? 'bg-success text-light' :
  (selectedAnswer === 'wrong' && !item.correct) ? 'bg-danger text-light' : ''
}`}

验证逻辑 #

修复后，用户选择错误答案时会触发setSelectedAnswer('wrong')，此时错误选项的selectedAnswer === 'wrong' && !item.correct条件成立，就能正常应用bg-danger类显示红色背景。

内容的提问来源于stack exchange，提问作者erza