React+Formik中如何条件合并两个Yup不可变验证对象

你之前的写法错误在于把Yup的Schema实例当成普通JS对象来扩展了——facValidation和insValidation都是Yup生成的ObjectSchema实例，不是普通对象，用{...facValidation, ...insValidation}得到的不是有效的Yup Schema，Formik无法识别它。

正确的合并方式 #

Yup提供了专门的方法来合并Schema，或者你也可以提取字段重新构建：

方法1：使用concat方法（推荐）

Yup的ObjectSchema自带concat方法，可以直接合并两个对象Schema：

const combinedSchema = facValidation.concat(insValidation);

方法2：提取字段重新构建Schema

如果你需要更灵活的字段控制，可以提取两个Schema的fields属性，用shape重新创建：

import * as Yup from 'yup';

const combinedSchema = Yup.object().shape({
  ...facValidation.fields,
  ...insValidation.fields,
});

你的组件中正确的条件使用方式 #

注意你原来的条件表达式insValidation ? facValidation : ...逻辑有问题——insValidation是一个Schema实例，永远为真，会一直返回facValidation，不会执行合并分支。替换成你实际的判断条件（比如控制是否启用Instagram验证的布尔变量）后，代码如下：

import { facValidation, insValidation } from "./validation";

// 替换成你的实际判断条件，比如是否仅启用Facebook验证
const onlyUseFacebook = false;

<Formik
  initialValues={initialState}
  validationSchema={onlyUseFacebook ? facValidation : facValidation.concat(insValidation)}
  onSubmit={handleSubmit}
>
  {({ errors, touched }) => <Form></Form>}
</Formik>

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