如何基于答题有效性对象数组为题号数组元素添加对应高亮样式（解决仅高亮最后一条记录问题）

你的问题根源在于内层遍历validity时，每次循环都会覆盖className变量——当遍历到后续的答题记录时，会重新判断当前题号是否匹配，不匹配就把样式重置为默认，导致前面匹配的题号样式被冲掉，最终只有最后一条记录的样式能保留。

修复后的代码 #

{
  questions.map((_, index) => {
    let className = 'question-list';
    // 只查找当前题号对应的答题记录，无需遍历全部
    const answerRecord = validity?.find(data => Number(data.questionNo) === index);
    
    if (answerRecord) {
      className = answerRecord.answer ? 'question-list correct-q' : 'question-list wrong-q';
    }

    // 注意：这里的index !=0 会跳过Q-0，如果你的题号是从1开始的话需要调整逻辑
    return index !== 0 && (
      <div 
        className={className} 
        key={index} 
        onClick={() => onclickQuestion(index)}
      >
        Q - {index}
      </div>
    );
  })
}

为什么原来的代码失效？ #

举个实际场景的例子：当处理index=2（也就是Q-2）时：

• 遍历第一条validity记录（questionNo=2），匹配成功，className被设为question-list correct-q
• 接着遍历第二条validity记录（questionNo=3），此时index=2 !==3，所以className被重置为question-list
• 最终Q-2的样式变成了默认，而不是预期的绿色

而用find方法的话，找到匹配的记录后就会立即停止遍历，不会覆盖之前设置好的样式，这样每个题号都能正确对应自己的答题状态。

另外补充一点：如果你的questions数组索引和实际题号不是一一对应的（比如题号从1开始，但数组索引从0开始），记得调整Number(data.questionNo)和index的匹配逻辑，比如改成Number(data.questionNo) === index +1，确保对应关系正确。

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