React使用Yup校验时出现TypeError: field.resolve is not a function错误求助

问题原因 #

你的代码中两处Object.keys(val)?.reduce()都没有传入初始累加值，当处理空对象或者val为undefined时，reduce会返回undefined，而yup.object().shape(undefined)会触发内部校验逻辑报错，抛出field.resolve is not a function错误。

另外还有两个次要问题：

• ActivityFiles字段在示例数据中是null，但Schema定义为yup.array().min(1)，会直接校验失败
• yup.mixed('').notRequired('')写法冗余，直接用yup.mixed().notRequired()即可，空字符串错误提示可省略

修复后的代码 #

const maxChar = 200; // 假设你已定义该变量，若无则需自行补充

const ActivitySchema = yup.object().shape({
    Activity: yup.lazy((value) => {
        if (value) {
            const ValidationObject = {
                ActivityName: yup.string().required(),
                Answers: yup.lazy((val) => {
                    if (val) {
                        const ValidObject = {
                            LanguageName: yup.string().required(),
                            Answer: yup.string().required().max(maxChar),
                        };

                        // 给reduce传入初始空对象{}
                        const NewEnt = Object.keys(val).reduce((acc, key) => ({
                            ...acc,
                            [key]: yup.object().shape(ValidObject)
                        }), {});

                        return yup.object().shape(NewEnt);
                    }
                    return yup.mixed().notRequired();
                })
            };

            // 同样给reduce传入初始空对象{}
            const NewEntries = Object.keys(value).reduce((acc, key) => ({
                ...acc,
                [key]: yup.object().shape(ValidationObject)
            }), {});

            return yup.object().shape(NewEntries);
        }
        return yup.mixed().notRequired();
    }),
    // 允许ActivityFiles为null或非空数组，可根据实际需求调整
    ActivityFiles: yup.array().nullable().min(1),
});

const Activities = {
    "Activity": {
        "042ab05d-eff7-420d-84bd-be7535da0f7e": {
            "ActivityName": "ActivityName",
            "Answers": {
                "en": {
                    "LanguageName": "English",
                    "Answer": "Test answer"
                },
                "fr": {
                    "LanguageName": "French",
                    "Answer": "Réponse test"
                }
            }
        },
        "29102f46-f2b3-4050-87a4-92eaf31ddadb": {
            "ActivityName": "ActivityName...",
            "Answers": {
                "en": {
                    "LanguageName": "English",
                    "Answer": "Another test"
                },
                "fr": {
                    "LanguageName": "French",
                    "Answer": "Une autre réponse"
                }
            }
        }
    },
    "ActivityFiles": ["test-file.pdf"] // 传入非空数组，符合校验规则
};

ActivitySchema.isValid(Activities).then((valid) => {
    if (valid) { 
        console.log("validation ok.")
    } else {
        console.log("validation is not ok.")
    }
});

关键修改点 #

• 给两处reduce添加初始值{}，确保即使没有遍历到任何键，也会返回空对象而非undefined
• 简化yup.mixed().notRequired()的写法，去掉冗余参数
• 调整ActivityFiles的Schema，添加.nullable()允许null值，或根据业务需求修改校验规则
• 示例数据中给Answer字段填充内容，避免因必填项为空导致校验失败

内容的提问来源于stack exchange，提问作者M.Çelik