如何正确使用 Yup 模式与单个反应-select？

Question

我正在使用 react-select 与 Formik 和 Yup 来验证我的表单，但由于某种原因我的验证不起作用。我的架构如下所示：

const Schema = Yup.object().shape({
age: Yup.object().shape({
    label: Yup.string().required("Required"),
    value: Yup.string().required("Required")
})
});

我的数据是这样的：

export const ageOptions = [
  { value: 0.1, label: "Not born yet" },
  { value: 0.3, label: "Baby - 0 to 3 months" },
  { value: 0.6, label: "Baby - 3 to 6 months" },
  { value: 0.12, label: "Baby - 6 to 12 months" },
  { value: 0.18, label: "Baby - 12 to 18 months" },
  { value: 0.24, label: "Baby - 18 to 24 months" },
  { value: 2, label: "2 years" },
  { value: 3, label: "3 years" },
  { value: 4, label: "4 years" },
  { value: 5, label: "5 years" },
  { value: 6, label: "6 years" },
  { value: 7, label: "7 years" },
  { value: 8, label: "8 years" },
  { value: 9, label: "9 years" },
  { value: 10, label: "10 years" },
  { value: 11, label: "11 years" },
  { value: 12, label: "12 years" },
  { value: 13, label: "13 years" },
  { value: 14, label: "14 years" }
];

当我select一个选项在select里面的UI时，返回如下错误：

age must be a `object` type, but the final value was: `null` (cast from the value `0.6`). If "null" is intended as an empty value be sure to mark the schema as `.nullable()`

如何使验证工作正常？

Link to sandbox

Answer 1

您要求 age 的类型为 object，但将其设置为所选选项的值。那就是触发您错误验证的原因。以下是修复验证的方法：

如果您想将 age 保留为对象，请将架构更改为以下内容：

const Schema = Yup.object().shape({
    age: Yup.object().shape({
        label: Yup.string().required("Required"),
        value: Yup.string().required("Required")
    })
});

否则将其设置为以下内容：

const Schema = Yup.object().shape({
    age: Yup.string()
});

如果您想在模式验证中使用对象，请更新 Select 组件上的 onChange 以将值设置为 option 而不是 option.value .

<Select
    { ... }
    value={field.value} // This can be set like this as a result of the change
    onChange={option => form.setFieldValue(field.name, option)}
/>

这应该可以正常工作。

Answer 2

Yup Validation Schema

 const validationSchema = function (values) {
  return Yup.object().shape({  
    courseId: Yup.string().required("Required").nullable()
  })
}

React-select custom class component

import React from 'react'
import Select from 'react-select'

class SingleSelectField extends React.Component {
constructor(props) {
super(props);
}

handleChange = (item) => {
if(item)
  this.props.onChange(this.props.type, item.value);
else
  this.props.onChange(this.props.type, "");
};

handleBlur = () => {
  this.props.onBlur(this.props.type, true);
};

render() {

const defaultValue = (options, value) => {
  return options ? options.find(option => option.value === value) : "";
};

return (
<div>
<Select
options={this.props.options}
onChange={this.handleChange}
onBlur={this.handleBlur}
value={defaultValue(this.props.options, this.props.value)}
isClearable
/>
{!!this.props.error && this.props.touched && (
 <div style={{ color: "red", marginTop: ".5rem" }}>
  {this.props.error}
 </div>
 )}
 </div>  
 )}
}

export { SingleSelectField as default };

如何正确使用 Yup 模式与单个反应-select？

How to properly use Yup schema with single react-select?

javascript

reactjs

react-select

yup

formik