React新手开发海贼王主题记忆卡牌 获胜提示不显示BUG求助

问题根因 #

你的代码存在4个逻辑错误共同导致了计数异常，小对数卡牌时因为更新时序巧合才勉强运行：

• 错误1：resetTurn 函数中多余执行了setMatches(0)，每次回合结束直接清空累计的匹配对数，正常逻辑下只有新游戏开始时才需要重置匹配数。
• 错误2：在setCards的map循环内调用setMatches，每配对成功1对卡牌会触发2次计数+1，和实际匹配进度不符。
• 错误3：setMatches使用了闭包中的旧matches值做累加，没有用函数式更新，批量更新时计数会出现偏差。
• 错误4：useEffect依赖数组错误加入了matches，每次匹配数变化都会重复触发对比逻辑，带来额外的更新和死循环风险。

修复方案 #

按以下步骤修改代码即可：

1. 删除resetTurn函数中的setMatches(0)语句
2. 将setMatches调用从setCards的map逻辑中移出，配对成功时仅执行1次，改用函数式更新
3. 移除useEffect依赖数组中的matches字段

修复后的核心代码片段

/* 对比卡牌的useEffect修改后 */
useEffect(() => {
  if (choiceOne && choiceTwo) {
    setDisabled(true);
    if (choiceOne.src === choiceTwo.src) {
      // 匹配成功时计数+1，移出map循环，用函数式更新拿到最新值
      setMatches(prev => prev + 1);
      setCards((prevCards) => {
        return prevCards.map((card) => {
          if (card.src === choiceOne.src) {
            return { ...card, matched: true };
          } else {
            return card;
          }
        });
      });
      resetTurn();
    } else {
      setTimeout(() => resetTurn(), 1000);
    }
  }
}, [choiceOne, choiceTwo]); // 移除matches依赖

/* resetTurn修改后 */
const resetTurn = () => {
  setChoiceOne(null);
  setChoiceTwo(null);
  setTurns((prevTurns) => prevTurns + 1);
  setDisabled(false);
  // 删除多余的setMatches(0)
};

修改后不管是3对还是9对卡牌，匹配全部完成后都会正常弹出获胜提示。

内容的提问来源于stack exchange，提问作者Alfio Federico Di Pinto