React中无Yup.map()时，如何为Map创建含键子集校验的Yup验证？

在没有Yup.map()的情况下，我们可以通过Yup.object()配合自定义test方法实现需求，具体代码如下：

const validationSchema = Yup.object().shape({
  myArrayField: Yup.array()
    .of(Yup.string())
    .min(1, 'This Field is Required')
    .required('This Field is Required'),
  myMapField: Yup.object()
    // 验证键和值均为字符串类型
    .test(
      'is-string-kv-pair',
      'myMapField的键和值必须都是字符串',
      (value) => {
        if (!value) return true; // 若字段为可选，空值直接通过；必填则调整逻辑
        return Object.entries(value).every(([key, val]) => 
          typeof key === 'string' && typeof val === 'string'
        );
      }
    )
    // 验证键是myArrayField的子集
    .test(
      'keys-are-subset',
      'myMapField的键必须是myArrayField元素的子集',
      (value, context) => {
        if (!value) return true; // 可选字段空值通过；必填则改为false并添加.required()
        const arrayValues = context.parent.myArrayField;
        if (!arrayValues) return false;
        const mapKeys = Object.keys(value);
        // 如需条件过滤，可在此处对mapKeys做筛选，比如只校验特定前缀的键
        // const filteredKeys = mapKeys.filter(key => key.startsWith('employee'));
        // return filteredKeys.every(key => arrayValues.includes(key));
        return mapKeys.every(key => arrayValues.includes(key));
      }
    )
    // 若myMapField为必填，取消注释以下一行
    // .required('myMapField为必填字段')
});

关键逻辑说明 #

1. 键值类型校验：通过Object.entries()遍历对象的所有键值对，逐一校验类型是否为字符串。
2. 子集校验：利用context.parent获取表单中的myArrayField值，提取myMapField的键后，用every()判断所有键是否都存在于数组中。
3. 条件过滤：如果需要只校验部分键，可在子集校验逻辑中对mapKeys做筛选后再判断。

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