React状态变量数字与字符串类型异常问题排查

其实这个问题的核心原因很明确——既不是React的锅，也不是Material-UI的问题，而是HTML原生<select>元素的固有特性在搞鬼。

关键细节：HTML会把<option>的value强制转为字符串 #

你定义的HIGH_YIELD = 0是数字类型，虽然在JSX里你把<option>的value绑定成了这个数字，但浏览器在渲染HTML时，会自动把所有<option>的value属性转换成字符串类型。也就是说，最终页面上的选项值其实是"0"、"1"、"2"，而不是你原本定义的数字0、1、2。

当用户切换选项时，handleSort里的event.target.value拿到的是字符串格式的值（比如"0"），你直接把它 setState到sort状态里，此时sort的类型就从初始的数字变成了字符串：

• 构造函数里的sort是数字0，和数字常量HIGH_YIELD完全匹配，所以switch逻辑正常；
• 但componentDidUpdate里的sort已经变成了字符串"0"，和数字常量做全等比较时不匹配，自然就掉进default分支了。

为什么字符串常量就正常？ #

当你把常量改成const HIGH_YIELD = '0'这种字符串类型后，初始sort状态是字符串"0"，event.target.value拿到的也是字符串"0"，两者类型和值都完全一致，switch的全等匹配就能正常触发，不管是构造函数还是componentDidUpdate里的逻辑都能正常工作。

两种可行的解决方案 #

• 方案一：保持数字常量，在handleSort里把字符串值转成数字：

  handleSort = (event) => {
    this.setState({ sort: Number(event.target.value) });
  }
  

  这样sort状态始终保持数字类型，和你最初定义的常量类型一致，匹配就不会出错。

• 方案二：把常量改成字符串类型（就是你已经试过的方法），直接让类型统一：

  const HIGH_YIELD = '0', LEAST_RISKY = '1', FAIR_PRICED = '2';
  

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