如何让Yup对象配合MUI接受undefined值？

你的问题核心是：TextField空值时返回的是空字符串""，而Yup的number()规则会尝试将空字符串转换为数字，结果得到NaN，触发类型错误——哪怕你加了.optional()，因为NaN属于无效的number类型，而非undefined。

下面是几种可行的解决方法：

方法1：通过Yup的transform转换空值 #

修改你的Yup Schema，给bonusPercentage添加transform方法，将空字符串转为undefined：

const schema = yup.object().shape({
  bonusPercentage: yup.number()
    .transform((value) => value === "" ? undefined : value)
    .optional()
})

原理：transform会在校验前修改输入值，把空字符串替换成undefined，而.optional()会跳过对undefined的类型校验，这样就不会触发NaN错误。

方法2：在React Hook Form的register里处理空值 #

在注册表单字段时，使用setValueAs将空字符串转为undefined：

<TextField
  sx={textFieldStyle}
  label='Bonus Percentage (%)'
  size='small'
  fullWidth
  {...register('bonusPercentage', {
    setValueAs: (value) => value === "" ? undefined : Number(value)
  })}
  error={Boolean(errors.bonusPercentage)}
/>

原理：setValueAs是React Hook Form提供的字段值转换钩子，提交前会把输入值转换成你需要的格式，这里直接把空值转成undefined，传给Yup的就是合法的可选值。

方法3：两种方法结合（推荐） #

同时在Schema和register里处理空值，双重保障避免边界情况：

// Schema部分
const schema = yup.object().shape({
  bonusPercentage: yup.number()
    .transform((value) => value === "" || isNaN(value) ? undefined : value)
    .optional()
})

// Register部分
<TextField
  sx={textFieldStyle}
  label='Bonus Percentage (%)'
  size='small'
  fullWidth
  {...register('bonusPercentage', {
    setValueAs: (value) => value === "" ? undefined : Number(value)
  })}
  error={Boolean(errors.bonusPercentage)}
/>

补充：你之前加的type='number'其实没用，因为即使是number类型的输入框，空值时依然返回空字符串""，而非undefined，所以必须手动转换。

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