使用Formik与Yup时，如何为数值类型字段设置无默认值的配置？

架构老林

2026-9-25

Formik + Yup 数值字段无默认值实现方案

核心逻辑

两个核心问题可通过统一初始值配置+Yup规则适配同时解决，不需要设置默认数值（如0），完全满足无默认值的需求：

1. 统一初始值配置

所有数值字段的初始值统一设为空字符串""，不要用undefined，从根源避免React抛出「非受控输入转受控输入」的报错：

const initialValues: any = {
  string: "",
  numeric1: "", // 对应type=number输入框
  numeric2: ""  // 对应type=text输入框
};

2. 适配Yup校验规则

通过Yup的transform方法和自定义错误提示，解决非数值输入提示不友好的问题，同时保证最终输出值为数字类型：

const validationSchema = yup.object().shape({
  string: yup.string().required("Required"),
  // 对应type=number的输入框
  numeric1: yup.number()
    .typeError("请输入合法的数值")
    .required("Required (numeric type)")
    // 空字符串转换为null，触发required校验
    .transform((value, originalValue) => originalValue === "" ? null : value),
  // 对应type=text的输入框
  numeric2: yup.string()
    .matches(/^-?\d+(\.\d+)?$/, "请输入合法的数值")
    .required("Required (string type)")
    // 可选：如果需要最终输出为数字类型，加这行转换
    .transform((value) => value === "" ? null : Number(value))
});