MTG卡牌颜色标识Switch语句失效及函数重复执行问题排查

核心问题原因 #

你的color函数里的switch逻辑完全错误：

• 从控制台日志['W']、['B','W']能明确看到，传入的colorIdentity是数组类型
• switch使用严格相等（===）比较，数组和布尔值（colorIdentity.length>1会被计算为true/false）、字符串（'W'）永远不可能相等，所以所有case都无法命中，只能走到default输出"No color found"

修复后的color函数 #

const color = (colorIdentity) => {
  let colorString = '';
  
  if (colorIdentity.length > 1) {
    // 多色卡牌用金色标识
    colorString = "gold";
  } else if (colorIdentity.length === 0) {
    // 无色卡牌用灰色标识
    colorString = "gray";
  } else {
    // 单色卡牌取数组唯一元素匹配颜色
    const singleColor = colorIdentity[0];
    switch(singleColor){
      case 'W':
        colorString = "white";
        break;
      case 'U': 
        colorString = "blue";
        break;
      case 'R':
        colorString = "red";
        break;
      case 'B':
        colorString = "black";
        break;
      case 'G':
        colorString = "green";
        break;
      default: 
        console.log('No color found', singleColor);
    }
  }
  
  return (
    <div style={{
      height: "1em",
      width: "1em",
      borderRadius: "50%",
      border: "1pt black solid",
      backgroundColor: colorString
    }} />
  )
}

修复逻辑说明 #

1. 先判断数组长度：
   • 长度>1：多色卡牌，直接设置金色（gold）
   • 长度=0：无色卡牌，设置灰色（gray）
2. 单色场景：取数组的第一个元素（单色卡牌的color_identity数组仅包含一个元素），再用switch匹配字符串值，这样就能正常命中对应颜色的case

关于鼠标悬停重复执行的补充 #

你提到的鼠标悬停时函数重复执行，是因为onMouseEnter触发setPreviewCard会导致组件重渲染，而color、rarity函数每次重渲染都会重新创建，因此重复执行。可以用useCallback包裹这两个函数（依赖项设为空数组，若无需外部变量）来优化，不过你说暂时搁置，这个可以后续再处理。

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