是的,错误,这必须是“对象”类型,但最终的值是:“null”

huangapple go评论67阅读模式
英文:

Yup error this must be a `object` type, but the final value was: `null`

问题

I have a validation schema defined using Yup as below:

export const mySchema = {
    'add-record': yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required()
    })
}

On click of some button, I invoke the validation as below:

await mySchema['add-record'].validate(props.formRef.current.getValues("myId"), { context: { other: 4 } });

props.formRef.current.getValues("myId") is actually mapped to a textbox on the UI, and as soon as I enter "123456789" and invoke the validation, I get an error saying:
"this must be an object type, but the final value was: null (cast from the value "123456789")."

Not sure why it is saying the final value is: null.


UPDATED:

I have a server API call in my main component, and based on that API response, I want to display the server error message via Yup's context.createError. So I want to pass isMyIdServiceError and MyIdServiceErrorMsg and display the error message in MyIdServiceErrorMsg if isMyIdServiceError is true.

I am trying the below, but it does not work. Please suggest.

'myId': yup
    .string()
    .nullable()
    .required()
    .when(
        ['$isMyIdServiceError', '$MyIdServiceErrorMsg'],
        ([isMyIdServiceError, MyIdServiceErrorMsg], schema) => {
            if (isMyIdServiceError === true) {
                context.createError({
                    message: MyIdServiceErrorMsg
                });
            }
        }
    ),

Trying with test also throws ValidationError in the console:

'myId': yup
    .string()
    .nullable()
    .required()
    .test(
        'api-error',
        '${$MyIdServiceErrorMsg}',
        async function(value, ctx) {
            const {
                ismyIdServiceError,
                myIdServiceErrorMsg
            } = this.options.context;
            if (ismyIdServiceError) {
                return ctx.createError({ path: 'myId', message: myIdServiceErrorMsg });
            }
            return true;
        }
    )

(Note: I've corrected the variable names to match your code.)

英文:

I have a validation schema defined using Yup as below

export const mySchema = {
    ['add-record']: yup.object().shape({
        'myId': yup
            .string()
            .nullable()
            .required()
    })
}

On click of some button, I invoke the validation as below;

await mySchema['add-record'].validate(props.formRef.current.getValues("myId"), { context: { other: 4 } });

props.formRef.current.getValues("myId") is actually mapped to a textbox on the UI and as soon as I enter 123456789 and invoke the validation, I get an error saying;
this must be a object type, but the final value was: null (cast from the value "123456789").

Not sure why it is saying the final value is: null


UPDATED
I have a server API call in my main component and based on that API response, I want to display the server error message via Yup's context.createError...So I want to pass isMyIdServiceError and MyIdServiceErrorMsg and display the error message in MyIdServiceErrorMsg, if isMyIdServiceError is true

I am trying the below, but it does not work. Please suggest.

'myId': yup
	.string()
	.nullable()
	.required()
	.when(
		['$isMyIdServiceError', '$MyIdServiceErrorMsg'],
		([isMyIdServiceError, MyIdServiceErrorMsg], schema) => {
			if (isMyIdServiceError === true) {
				context.createError({
					message: MyIdServiceErrorMsg
				});
			}
		}
	),

Trying with test also throws ValidatonError in the console

'myId': yup
		.string()
		.nullable()
		.required()
		.test(
			'api-error',
			'${$MyIdServiceErrorMsg}',
			async function(value, ctx) {
				const {
					ismyIdServiceError,
					myIdServiceErrorMsg
				} = this.options.context;
				if (ismyIdServiceError) {
					return ctx.createError({ path: 'myId', message: myIdServiceErrorMsg });
				}
				return true;
			}
		)

答案1

得分: 1

你看到的错误是因为 mySchema['add-record'] 期望一个对象,但你直接传递了一个字符串值。

在你的模式定义中,你已经将 mySchema['add-record'] 定义为一个具有 'myId' 属性的对象,所以当你调用 validate 时,它期望你传递一个具有相同结构的对象。

你应该使用 getValues() 方法,不带参数,以将整个表单值作为对象获取,然后使用你的模式验证该对象。

尝试这样做:

const formValues = props.formRef.current.getValues();
try {
   await mySchema['add-record'].validate(formValues, { context: { other: 4 } });
  console.log('验证通过!');
} catch (error) {
  console.error('验证失败,错误信息:', error);
}
英文:

The error you're seeing is because mySchema['add-record'] is expecting an object, but you're passing a string value directly.

In your schema definition, you've defined mySchema['add-record'] as an object with a property of 'myId', so when you call validate, it expects you to pass in an object with the same structure.

You should use the getValues() method without argument to get the entire form values as an object, then validate that object with your schema.

try this :

const formValues = props.formRef.current.getValues();
try {
   await mySchema['add-record'].validate(formValues, { context: { other: 
4 } });
  console.log('Validation passed!');
} catch (error) {
  console.error('Validation failed with error:', error);
}

答案2

得分: 1

尝试使用以下代码来处理错误:

'myId': yup
.string()
.nullable()
.required()
.test(
    'api-error',
    '${$MyIdServiceErrorMsg}',
    function (value) {
        const { isMyIdServiceError, MyIdServiceErrorMsg } = this.options.context;
        if (isMyIdServiceError) {
            return this.createError({ message: MyIdServiceErrorMsg });
        }
        return true;
    }
)

然后,在调用 validate() 时,您需要像这样传递上下文:

const formValues = { myId: props.formRef.current.getValues("myId") };
const context = { isMyIdServiceError: /* 您的值 */, MyIdServiceErrorMsg: /* 您的值 */ };

try {
  await mySchema['add-record'].validate(formValues, { context });
  console.log('Validation passed!');
} catch (error) {
  console.error('Validation failed with error:', error);
}

请将注释中的 /* 您的值 */ 替换为您实际的值。

英文:

try this for the error :

'myId': yup
.string()
.nullable()
.required()
.test(
    'api-error',
    '${$MyIdServiceErrorMsg}',
    function (value) {
        const { isMyIdServiceError, MyIdServiceErrorMsg } = this.options.context;
        if (isMyIdServiceError) {
            return this.createError({ message: MyIdServiceErrorMsg });
        }
        return true;
    }
)

Then, when calling validate(), you'll need to pass in the context like this:

const formValues = { myId: props.formRef.current.getValues("myId") };
const context = { isMyIdServiceError: /* your value */, MyIdServiceErrorMsg: /* your value */ };

try {
  await mySchema['add-record'].validate(formValues, { context });
  console.log('Validation passed!');
} catch (error) {
  console.error('Validation failed with error:', error);
}

huangapple
  • 本文由 发表于 2023年6月6日 16:54:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76412954.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定