React Native中Formik与Yup表单空字符串初始值被转为Null问题

问题根因 #

该报错由Yup的默认类型转换逻辑导致：对于未标记required的string类型字段，Yup在校验阶段会默认将空字符串自动转为null，与你定义的string类型校验规则冲突，因此抛出类型不匹配错误。
而字段被触摸后，setFieldValue会明确将值设置为字符串类型，不会触发Yup的默认转换逻辑，所以不会出现报错。

解决方案 #

方案1：允许非必填字段为null值 #

给email、profession等非必填的string字段添加nullable()配置，明确允许字段值为null：

const validationSchema = Yup.object().shape({
    firstName: Yup.string().required().min(2).label('First Name'),
    lastName: Yup.string().required().min(2).label('Last Name'),
    email: Yup.string("Please enter valid email address")
      .email("Please enter valid email address")
      .nullable()
      .label("Email address"),
    profession: Yup.string("Please enter your profession")
      .nullable()
});

如果提交时需要统一把null转回空字符串，可在Formik的onSubmit回调中对字段值做统一处理。

方案2：强制保留字符串类型 #

使用Yup自带的ensure()方法，自动将null、undefined转为空字符串，始终保持字段为string类型，和你初始化的空字符串预期完全匹配：

const validationSchema = Yup.object().shape({
    firstName: Yup.string().required().min(2).label('First Name'),
    lastName: Yup.string().required().min(2).label('Last Name'),
    email: Yup.string("Please enter valid email address")
      .email("Please enter valid email address")
      .ensure()
      .label("Email address"),
    profession: Yup.string("Please enter your profession")
      .ensure()
});

该方案无需额外修改提交逻辑，适配性更好，优先推荐使用。

方案3：全局关闭Yup自动类型转换（不推荐） #

在校验时传入strict: true配置，完全关闭Yup的默认类型转换能力：

<Formik
  initialValues={{
    firstName: currentUser ? currentUser.firstName : "",
    lastName: currentUser ? currentUser.lastName : "",
    email: currentUser ? currentUser.email : "",
    profession: currentUser ? currentUser.profession : ""
  }}
  validationSchema={validationSchema}
  validate={(values) => {
    try {
      validationSchema.validateSync(values, { strict: true });
      return {};
    } catch (err) {
      return err.errors;
    }
  }}
  onSubmit={/* 你的提交逻辑 */}
>

该方案改动范围大，容易影响其他校验规则的正常运行，仅在前两个方案不满足需求时使用。

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