React答题应用if判断在Chrome/Firefox正常但Safari异常求助

问题重现 #

我用React开发了一款答题应用，逻辑是通过点击事件获取用户答案，和正确答案比对。核心代码如下：

// 从数据中获取正确答案
let correctAnswer = await questionArray[questionNumber-1].correctAnswer;
console.log("Correct Answer: "+ correctAnswer)

// 获取用户选择的答案
let userAnswer = e.target.outerText
console.log("User Answer: " + userAnswer)

// 比对答案
if (correctAnswer === userAnswer){
    console.log('CORRECT')
}
else{
    // Safari多数时候走这里，偶尔才会触发CORRECT
    console.log("WRONG")
}

这段代码在Chrome、Firefox中能正常执行，但Safari里多数情况下会进入else分支，仅偶尔正确触发if分支，怀疑是浏览器兼容或useState异步特性导致的问题。

解决方案 #

1. 修复字符串比对的浏览器差异问题

Safari对outerText的处理和其他浏览器存在差异，可能返回包含多余空格、换行或不可见空白字符的字符串，直接用===比对会失败。可以做以下调整：

• 替换outerText为textContent（兼容性更好，返回元素内的纯文本）
• 对两个字符串都调用trim()清理首尾空白
• 如果答案涉及特殊字符，用normalize()统一Unicode编码格式

示例：

const userAnswer = e.target.textContent.trim().normalize();
const correctAnswer = questionArray[questionNumber-1].correctAnswer.trim().normalize();

2. 移除不必要的await

代码中questionArray[questionNumber-1].correctAnswer看起来是同步数据，不需要用await。多余的await会导致代码异步执行，可能和React事件处理的时序冲突，尤其是在Safari中可能引发值的获取时机偏差，直接去掉即可。

3. 同步正确答案状态避免useState异步问题

如果questionNumber是用useState管理的状态，直接在点击事件中取questionArray[questionNumber-1]可能拿到旧值（因为useState更新是异步的）。可以用useEffect监听questionNumber变化，提前把当前题目的正确答案存入状态：

import { useState, useEffect } from 'react';

// 组件内定义状态保存当前正确答案
const [currentCorrectAnswer, setCurrentCorrectAnswer] = useState('');

useEffect(() => {
  // 当题目编号变化时，更新正确答案
  const question = questionArray[questionNumber - 1];
  if (question) {
    setCurrentCorrectAnswer(question.correctAnswer.trim().normalize());
  }
}, [questionNumber, questionArray]);

// 点击事件处理函数
const handleAnswerClick = (e) => {
  const userAnswer = e.target.textContent.trim().normalize();
  
  console.log("Correct Answer: ", currentCorrectAnswer);
  console.log("User Answer: ", userAnswer);

  if (currentCorrectAnswer === userAnswer) {
    console.log('CORRECT');
  } else {
    console.log('WRONG');
  }
};

总结 #

核心问题大概率是Safari对文本节点的处理差异导致字符串比对失败，配合useState异步更新的时序问题加剧了这个现象。通过标准化文本格式、同步正确答案状态，就能解决跨浏览器的比对失效问题。

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