Yup验证报错：对象解析与服务器集成问题

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《Yup验证报错：必须是对象解析与服务器集成》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

在Yup验证中遇到“必须是对象”的错误通常是由于验证器期望接收一个完整的数据对象，但实际传入了单个字段的值。本文将详细解释此类型不匹配的原因及解决方案，并通过示例代码演示如何正确传递数据进行验证。此外，还将深入探讨如何利用Yup的`test`方法和`context`机制，优雅地集成和展示来自服务器端的自定义错误消息，从而构建更健壮、用户友好的表单验证流程。

1. 理解Yup的对象验证机制

Yup是一个流行的JavaScript schema验证库，它允许开发者定义数据的结构和验证规则。当您使用yup.object().shape({...})来定义一个验证模式时，您实际上是在声明一个期望接收JavaScript对象的验证器。这个对象应该包含您在shape中定义的各个属性。

例如，以下schema定义了一个名为add-record的验证器，它期望一个包含myId属性的对象：

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

此处的mySchema['add-record']是一个针对整个对象的验证器，它会检查传入的数据是否为一个对象，并且该对象是否包含一个符合string().nullable().required()规则的myId属性。

2. 诊断与解决“必须是对象”的类型错误

当您调用validate方法时，如果传入的数据类型与schema定义的期望不符，Yup就会抛出类型错误。常见的场景是，当schema期望一个对象时，您却错误地传入了单个字段的值。

错误示例：

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

在此示例中，mySchema['add-record']期望一个对象，但props.formRef.current.getValues("myId")只返回了myId字段的字符串值（例如"123456789"）。Yup尝试将这个字符串值强制转换为对象，失败后将其视为null，并最终抛出“this must be a object type, but the final value was: null”的错误。

解决方案：传入完整的表单数据对象

正确的做法是，当schema定义了一个对象时，您应该将包含所有相关字段的整个数据对象传递给validate方法。如果您的表单库（如react-hook-form）提供了获取所有表单值的方法，请使用它。

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 来定位和显示具体字段的错误
        }
    }
}

通过props.formRef.current.getValues()（不带参数），您可以获取表单的所有字段值，并将其作为一个对象传递给Yup的validate方法，从而匹配schema的期望。

3. 集成服务器端验证错误与Yup的test方法

在某些情况下，除了客户端验证，我们还需要根据服务器API的响应来显示错误消息。Yup提供了test方法，允许您定义自定义的异步或同步验证逻辑，并结合context来传递外部数据。

假设您有一个API调用，它返回一个布尔值isMyIdServiceError和一条错误消息MyIdServiceErrorMsg。您希望在isMyIdServiceError为true时显示MyIdServiceErrorMsg。

使用test方法集成服务器端错误：

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;
                }
            )
    })
};

如何调用并传递上下文：

当您调用validate时，需要将服务器端错误状态和消息作为context对象的一部分传入：

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);

test方法详解：

• 'api-error'：这是自定义测试的唯一标识符。
• '${$MyIdServiceErrorMsg}'：这是当测试失败时，如果ctx.createError没有提供message，Yup将使用的默认错误消息模板。$MyIdServiceErrorMsg表示它会从context中获取MyIdServiceErrorMsg的值。
• async function(value, ctx)：这是测试逻辑函数。
  • value：当前被验证字段的值（例如myId的值）。
  • ctx：包含验证上下文信息的对象，例如ctx.path（当前字段路径）、ctx.createError（用于创建错误）。
  • this.options.context：用于访问传递给validate方法的context对象。这是获取isMyIdServiceError和myIdServiceErrorMsg的关键。
• ctx.createError({ path: ctx.path, message: myIdServiceErrorMsg })：当需要抛出自定义错误时，使用此方法。path确保错误与正确字段关联，message则是要显示的具体错误文本。

4. 最佳实践与注意事项

1. 匹配数据结构： 始终确保您传递给Yup validate方法的数据结构与您的schema定义完全匹配。如果schema是yup.object().shape(...)，就传入一个对象；如果schema是yup.string()，就传入一个字符串。
2. 错误处理： 使用try-catch块来包裹validate方法的调用，以便优雅地捕获和处理yup.ValidationError。
3. 利用context： context是Yup中一个非常强大的特性，它允许您在验证过程中传递动态数据，这对于实现条件验证或集成外部验证逻辑（如服务器端错误）至关重要。
4. 清晰的错误消息： 为您的验证规则提供清晰、用户友好的错误消息。这可以通过在required()、min()等方法中直接提供字符串，或在test方法中使用ctx.createError({ message: '...' })来实现。
5. 异步验证： test方法可以是一个异步函数（如本例所示），这使得它能够执行API调用或其他异步操作来辅助验证。

总结

解决Yup中“必须是对象”的错误，核心在于理解Yup schema对数据结构的期望，并确保在调用validate时传入匹配的数据类型，通常是完整的表单数据对象。同时，通过巧妙运用yup.test()方法和context机制，我们可以将复杂的服务器端验证逻辑和错误消息无缝集成到客户端的Yup验证流程中，从而提供更全面的验证体验和更清晰的用户反馈。掌握这些技巧，将使您的表单验证逻辑更加健壮和灵活。

以上就是《Yup验证报错：对象解析与服务器集成问题》的详细内容，更多关于的资料请关注golang学习网公众号！