React(Rails后端)嵌套switch语句未执行正确分支问题排查

嘿，看你遇到的这个问题——React+Rails应用里嵌套switch明明条件满足却走了默认分支，我之前也踩过类似的坑，给你梳理几个最可能的原因：

• Switch是严格相等匹配，别忽略类型问题
  先确认你的变量类型有没有问题！比如Rails后端返回的倒计时数值会不会是字符串类型？如果你的状态里存的是"-1"而不是-1，那countdown < 0的判断虽然是true，但如果switch的写法不对，就匹配不上。另外外层的this.state.getslacks.length是数字，要是你在case里写了字符串（比如case "0"），严格相等就会不成立。

• 内层Switch的写法可能完全错了
  很多人会误以为switch能像if-else那样直接写条件，但其实switch是值匹配——switch(表达式)里的表达式会和每个case的值做严格相等比较。如果你的内层是要判断“变量是否小于0”，正确的写法应该把switch的条件设为true，然后case写布尔表达式：

  // 错误示例：这种写法永远不会触发预期分支
  switch(this.state.countdown) {
    case this.state.countdown < 0:
      // 这里是拿countdown的值和一个布尔值比较，完全不匹配
      break;
    default:
      // 只能走这里
  }
  
  // 正确写法：让switch匹配true，case的布尔表达式结果和它对比
  switch(true) {
    case this.state.countdown < 0:
      // 当表达式为true时，就会进入这个分支
      // 你的倒计时逻辑写在这
      break;
    default:
      // 默认分支
  }
  

  这应该是最常见的问题，很多人第一次用switch写条件判断都会踩这个坑。

• React状态更新的异步性坑了你
  如果你是刚调用完setState就立刻执行这个switch判断，那大概率读取的是旧状态！React的setState是异步的，状态不会立刻更新。比如你刚更新了getslacks或者倒计时变量，紧接着就去判断，这时候this.state里还是旧值，自然逻辑就不对了。
  解决办法是把switch逻辑放在setState的回调里，或者用componentDidUpdate（类组件）监听状态变化后再执行判断。

• 外层Switch的break没写，导致逻辑串了
  检查下外层switch的case有没有加break！如果外层判断“用户有记录”的case没写break，程序会继续往下执行其他case的代码，可能会干扰内层switch的逻辑，导致你误以为是内层的问题。

最后给你个小建议：先在switch前加几个console.log，把this.state.getslacks.length、倒计时变量的值和类型都打出来，确认它们和你预期的一致——有时候肉眼以为的数值，实际是字符串，这就会导致所有判断都不对。

内容的提问来源于stack exchange，提问作者Wes JC Corman