Yup.when: "`NaN` (从值 `NaN` 转换)"答案

【问题标题】：Yup.when: "`NaN` (cast from the value `NaN`)"Yup.when: "`NaN` (从值 `NaN` 转换)"
【发布时间】：2020-03-05 07:50:21
【问题描述】：

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

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 的任何关键概念吗？

【问题讨论】：

我认为您的otherwise 可能是导致您出现问题的原因，请尝试将.nullable() 添加到该问题中。

标签： reactjs validation yup

【解决方案1】：

你应该使用 typeError

这是我的代码中的一个示例：

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

【讨论】：

我现在只设置了 typeError('')，所以我的应用程序中不会显示不需要的错误

【解决方案2】：

由于您希望该字段在值为 NaN 并且它不是必填字段时仍然有效，因此将您的 otherwise 更改为此应该可以解决它：

otherwise: Yup.number().notRequired().nullable()

在末尾添加.nullable() 是关键。

【讨论】：