React传递newItem给getFee报错Unknown user type如何解决？

• 核心问题是类型不匹配：HTML表单控件（select、input）返回的value都是字符串类型，你在调用setNewItem时直接把字符串值存入状态，但Calculator类的getFee方法中使用全等===判断数字类型的userType、itemType，字符串"0"和数字0不相等，所以直接进入default分支抛出"Unknown user type"错误。
• 隐藏问题：price字段也被存为字符串类型，后续费用计算时会出现字符串拼接的异常结果。

方法1：表单更新状态时统一转换类型（推荐） #

在setNewItem时把对应字段转成数字类型，从源头保证数据类型符合计算逻辑要求：

1. 修改userType选择器的onChange逻辑 #

onChange={(event) => {
  setNewItem({
    ...newItem, 
    userType: Number(event.target.value)
  })
}}

2. 修改itemType选择器的onChange逻辑 #

onChange={(event) => {
  setNewItem({
    ...newItem, 
    itemType: Number(event.target.value)
  })
}}

3. 修改price输入框的onChange逻辑 #

onChange={(event) => {
  setNewItem({
    ...newItem, 
    price: Number(event.target.value)
  })
}}

方法2：提交前增加校验逻辑 #

可以在提交时先校验用户是否完成选择，避免未选择的默认值-1进入计算逻辑：

const onNewItemSubmit = event => {
  event.preventDefault();
  // 新增校验
  if (newItem.userType < 0 || newItem.itemType < 0) {
    alert('请选择用户类型和商品类型');
    return;
  }
  const calc = new Calculator();
  const fee = calc.getFee(newItem);
  setTotal(total + fee);
};

可选兼容方案：修改Calculator的判断逻辑 #

如果不想修改前端数据存储的类型，也可以把getFee中的case判断改成字符串类型，不过这种方式不推荐，容易留下类型不统一的隐患：

switch (userType) {
  case "0": // 改成字符串判断
  // 其余case同理修改
}

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