反应，是的，Formik如何从另一个架构扩展当前架构

问题描述

有很多方案，它们由一些相同的字段组合而成。更改一种方案的字段时，需要更改相同的字段，但在其他方案中。我希望不同方案的字段或方案本身引用或继承一个通用方案。类似的东西：

    import * as Yup from "yup";
    import {commonSchema} from "./common";

    export const parentSchema = Yup.object().shape({
      FirstName: Yup.string()
        .min(2,`Имя не может состоять менее чем из 2 сомволов`)
        .max(50,`Имя не может состоять более чем из 50 сомволов`)
        .required(`Поле 'Имя' обязательное для заполнения`),SecondName: ref(commonSchema.SecondName)
    });


    // commonSchema

    export const commonSchema = Yup.object().shape({
      SecondName: Yup.string()
        .min(2,`Отчество не может состоять менее чем из 2 сомволов`)
        .max(100,`Отчество не может состоять более чем из 100 сомволов`)
    });

简而言之，对一个通用架构进行更改不必对具有相同字段的其他架构进行更改。

我想在一个文件中收集所有公共属性。然后从每个文件中引用必要的属性

解决方法

在 Yup 中最接近模式扩展/继承的是使用 object.shape 基于现有架构创建新架构： Yup documentation

object.shape(fields: object,noSortEdges?: Array<[string,string]>): Schema

定义对象的键和所述键的模式。 请注意，您可以链接 shape 方法，其作用类似于对象扩展

const baseSchema = Yup.object().shape({
   id: string().isRequired(),name: string().isRequired()
})

const someSchema = baseSchema.shape({
   id: number().isRequired(),age: number().isRequired()
})

相当于：

const someSchema = Yup.object().shape({
   id: number().isRequired(),// notice how 'id' is overridden by child schema
   name: string().isRequired(),age: number().isRequired()
})

另一种方法是使用 concat(schema) 通过组合两个架构来创建新架构实例：Yup documentation

mixed.concat(schema: Schema): Schema 通过组合两个模式创建模式的新实例。只能连接相同类型的模式。

const baseSchema = Yup.object().shape({
   name: string().isRequired()
})

const someSchema = baseSchema.concat(
   Yup.object().shape({
    age: number().isRequired()
}))

// someSchema will be equipped with both `name` and `age` attributes 

请注意，concat 仅在两个架构对象具有不同属性或具有完全相同类型的相同属性时才有效。

,

您可以这样做：

const CommonSchema = {
  firstName: Yup.string().required('First name is required')
};

const SchemaWithJustFirstName = Yup.object().shape({
  ...CommonSchema,});

const SchemaWithSecondName = Yup.object().shape({
  ...CommonSchema,secondName: Yup.string().required('Second name is also required')
});