React比对两个数组值计算得分的逻辑异常排查

现有计分逻辑存在两个致命问题，直接导致计分结果异常：

• 判断逻辑互斥+触发时机错误
  useEffect会在answers数组每次更新（即用户每选1个数字）时触发，而代码使用else if做链式互斥判断，意味着每次触发最多只会命中一个判断分支、最多加1分。同时判断顺序是从最后一道题（答案索引3）倒着往第一道题（答案索引0）校验，只要靠前位置的答案正确，后续每次effect触发时，判断链走到这个永远成立的分支就会直接加分，根本不会校验其他位置的答案是否正确。
  典型场景：如果用户第一个选的数字刚好匹配numbers[1].num，后续不管选什么数字，每次effect触发时，前面的高索引判断因为对应位置答案不匹配/还没填写，都会走到最后一个分支命中正确条件，重复给第一道题加分，从表现上看就是“第一个答对了后面全算对”。
• 索引匹配逻辑不符合规则
  需要用户回忆的4个数字是numbers数组索引1-4的元素，和answers数组索引0-3的元素是一一对应的顺序校验关系，不存在互斥判断的前提。原代码没有做顺序逐位比对，反而用互斥分支随机命中某一个位置的正确条件，完全不符合计分规则。

调整逻辑为逐位独立比对，弃用互斥判断，同时避免重复累加分数：

• 如果需要等用户答完4道题再出最终分，就判断答案长度满4后再统一计算
• 如果需要实时展示当前已选答案的得分，就每次answer更新后，重新统计当前已选答案的正确总数，不要做增量累加

修复后的实时计分版本代码如下：

useEffect(() => {
  if (answers.length === 0) {
    setScore(0);
    return;
  }
  let correctCount = 0;
  // 逐位比对：第i个选择的答案，对应numbers数组第i+1位的待记忆数字
  for (let i = 0; i < answers.length; i++) {
    if (answers[i] === numbers[i + 1].num) {
      correctCount++;
    }
  }
  setScore(correctCount);
}, [answers, numbers]);

如果只需要答完4题再计算最终得分，把循环前的判断改成if (answers.length !== 4) return;即可。

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