React中map渲染元素点击首项时className未全量更新问题

• 类名判断逻辑存在假值误判：数组首个元素的索引是0，原有代码用(clickedItem) ? "option already-answered": "option"判断是否已答题，JavaScript中数字0会被判定为假值，因此选中首个元素时，这个判断会直接返回false，其余元素不会被加上already-answered类名；只有当前点击的首元素因为前面的index === clickedItem条件成立（0===0），能正常匹配到correct/wrong类，就出现了仅首元素更新的异常。
• 逻辑运算符写错：代码里用了按位与运算符&代替逻辑与&&，虽然部分场景下结果看似正常，但本质是位运算而非布尔逻辑判断，存在隐性bug。
• 状态更新存在隐患：直接读取correctAnswers、results等state值做更新，React状态更新是异步批量执行的，高概率拿到旧值导致计数、结果记录错误。

• 把所有类名判断里的按位与&替换为标准逻辑与&&
• 把已答题状态的判断从直接判断clickedItem真值，改为显式判断clickedItem !== null，规避索引0被误判为未选中的问题
• 所有依赖前序状态的更新操作，改用函数式更新写法，保证拿到的是最新状态值
• 增加重复点击拦截，答题后点击选项不再重复触发逻辑
• 把类名判断逻辑抽离出来，避免嵌套三元运算符可读性差、容易写错的问题

// 注意初始化clickedItem默认值必须为null
const [clickedItem, setClickedItem] = useState(null);

const changeHandler = (e) => {
  // 答题后拦截重复点击
  if (clickedItem !== null) return;
  
  const selectedIndex = parseInt(e.target.id, 10);
  setClickedItem(selectedIndex);
  const selectedOption = data.options[selectedIndex];
  
  // 依赖旧state的更新统一用函数式写法，避免拿到旧值
  setResults(prev => [...prev, { selectedTag: selectedIndex }]);
  onAnswerUpdate(prevState => [...prevState, { q: data.question, id: data.id, a: selectedOption }]);
  
  if (selectedOption === data.answer) {
    updateIndicator("correct");
    setCorrectAnswers(prev => prev + 1);
    setResponse(`Correct answer! ${data.answerShow}`);
  } else {
    updateIndicator("wrong");
    setResponse(`Wrong answer ${data.answerShow}`);
  }
  
  if(error) setError('');
}

return (
  <div className="quiz-box custom-box">
    <div className="question-number">
      <span>Question {questionCounter + 1} of </span>{numberOfQuestions}
    </div>
    <div className="question-text">{data.question}</div>
    <img src={randomImages[data.img]} alt="quiz illustration" />
    <div className="option-container">
      {shuffleanswers.map((option, index) => {
        // 抽离类名判断逻辑，避免嵌套三元写错
        let optionClass = "option";
        if (clickedItem !== null) {
          if (index === clickedItem) {
            optionClass = data.options[index] === data.answer ? "option correct" : "option wrong";
          } else {
            optionClass = "option already-answered";
          }
        }
        return (
          <div 
            id={index} 
            value={option}
            className={optionClass}
            onClick={changeHandler} 
            key={index}
          >
            {option}
          </div>
        )
      })}
    </div>
  </div>
)

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