Yup验证中“必须是对象”错误解析与服务器端错误集成

export const mySchema = {
    ['add-record']: yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required('myId是必填项') // 添加具体的错误消息
    })
};

// 假设 props.formRef.current.getValues("myId") 返回的是字符串 "123456789"
await mySchema['add-record'].validate(props.formRef.current.getValues("myId"), { context: { other: 4 } });

import * as yup from 'yup';

// 假设您的schema定义如上
export const mySchema = {
    ['add-record']: yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required('myId是必填项')
    })
};

// 在组件或处理函数中
async function handleValidation(props) {
    // 获取整个表单的值对象
    const formValues = props.formRef.current.getValues(); 
    // formValues 应该是一个对象，例如：{ myId: "123456789", otherField: "abc" }

    try {
        // 使用整个表单值对象进行验证
        await mySchema['add-record'].validate(formValues, { context: { other: 4 } });
        console.log('验证通过!');
        // 验证通过后的逻辑
    } catch (error) {
        console.error('验证失败，错误信息:', error.message);
        // 处理验证失败，例如显示错误消息给用户
        if (error instanceof yup.ValidationError) {
            console.log('详细验证错误:', error.errors);
            // 可以根据 error.path 和 error.message 来定位和显示具体字段的错误
        }
    }
}

import * as yup from 'yup';

export const mySchema = {
    ['add-record']: yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required('myId是必填项')
            .test(
                'api-error', // 验证器的唯一名称
                '${$MyIdServiceErrorMsg}', // 默认错误消息模板，可使用上下文变量
                async function(value, ctx) {
                    // 从验证选项的context中获取服务器端错误信息
                    const {
                        isMyIdServiceError,
                        myIdServiceErrorMsg
                    } = this.options.context;

                    // 如果服务器指示有错误，则创建并返回一个验证错误
                    if (isMyIdServiceError) {
                        return ctx.createError({ 
                            path: ctx.path, // 错误路径，通常是当前字段名
                            message: myIdServiceErrorMsg 
                        });
                    }
                    // 否则，验证通过
                    return true;
                }
            )
    })
};

async function handleFormSubmit(props, serverResponse) {
    // 假设 serverResponse 是您的API响应，包含 isMyIdServiceError 和 myIdServiceErrorMsg
    const { isMyIdServiceError, myIdServiceErrorMsg } = serverResponse;

    const formValues = props.formRef.current.getValues();

    try {
        await mySchema['add-record'].validate(formValues, { 
            context: { 
                // 传递服务器端错误信息到Yup的context
                isMyIdServiceError: isMyIdServiceError,
                myIdServiceErrorMsg: myIdServiceErrorMsg,
                other: 4 // 其他上下文变量
            } 
        });
        console.log('表单和API验证均通过!');
        // 提交表单等成功逻辑
    } catch (error) {
        console.error('验证失败:', error.message);
        if (error instanceof yup.ValidationError) {
            console.log('详细验证错误:', error.errors);
            // 此时，如果服务器有错误，error.errors中将包含由 test 方法创建的错误消息
        }
        // 显示错误给用户
    }
}

// 示例：模拟服务器响应
const mockServerResponseWithError = {
    isMyIdServiceError: true,
    myIdServiceErrorMsg: '该ID已被占用，请尝试其他ID。'
};

const mockServerResponseSuccess = {
    isMyIdServiceError: false,
    myIdServiceErrorMsg: ''
};

// 调用示例
// handleFormSubmit(props, mockServerResponseWithError);
// handleFormSubmit(props, mockServerResponseSuccess);