reactjs 是的，当：“'NaN'(从'NaN'值转换而来)”

bq8i3lrv 于 2022-12-03 发布在 React

关注(0)|答案(5)|浏览(174)

我正在尝试为表单字段/选择实现一个非常基本的验证。验证模式：

vehicleProvider: Yup.object() // This is an object which is null by default
    .required('formvalidation.required.message')
    .nullable(), 
reserveVehicle: Yup.number().when('vehicleProvider', { // This is a number which is null by default
    is: provider => provider?.hasReserve,
    then: Yup.number()
        .required('formvalidation.required.message')
        .nullable(),
    otherwise: Yup.number().notRequired()
}),

我想做的事：如果provider.hasReserve是true，则只需要/验证reserveVehicle。否则，不需要该数字。我得到以下错误：
“reserveVehicle必须是number类型，但最终值为：NaN（从值NaN转换而来）”。
这是有道理的，因为，null不是一个数字，但是当我试图告诉它它不应该被要求的时候，在我看来它不应该试图去计算它。
我是否遗漏了Yup的任何关键概念？

reactjs

来源：https://stackoverflow.com/questions/58770630/yup-when-nan-cast-from-the-value-nan

5条答案

按热度按时间

6bc51xsx1#

您应该使用typeError
下面是我的代码示例：

amount: Yup.number()
                    .typeError('Amount must be a number')
                    .required("Please provide plan cost.")
                    .min(0, "Too little")
                    .max(5000, 'Very costly!')

赞(0）回复(0）举报 2022-12-03

uqzxnwby2#

使用这段代码。transform（（value）=〉（isNaN（value）？0：值））

age: yup
.number()
.transform((value) => (isNaN(value) || value === null || value === undefined) ? 0 : value)
.required()
.label("Age"),

赞(0）回复(0）举报 2022-12-03

tpgth1q73#

您可以用途：

amount: yup.number().typeError("")

这将忽略验证消息，但执行此操作时应小心。

赞(0）回复(0）举报 2022-12-03

0x6upsns4#

添加类型when中出错

vehicleProvider: Yup.object() // This is an object which is null by default
    .required('formvalidation.required.message')
    .nullable(), 
reserveVehicle: Yup.number().when('vehicleProvider', { // This is a number which is null by default
    is: provider => provider?.hasReserve,
    then: Yup.number()
        .typeError('Amount must be a number')
        .required('formvalidation.required.message')
        .nullable(),
    otherwise: Yup
        .number()
        .typeError('Amount must be a number')
        .notRequired()
}),

赞(0）回复(0）举报 2022-12-03

ibps3vxo5#

由于您希望在值为NaN时该字段仍然有效，并且它不是必填字段，因此将otherwise更改为以下值应该可以解决此问题：
otherwise: Yup.number().notRequired().nullable()
最后加上.nullable()是关键。

赞(0）回复(0）举报 2022-12-03