web-dev-qa-db-ja.com

React-Select（Single Select）のYUPでオブジェクト検証を割り当てる方法

YUPコンセプトを使用してReact-Select（Single-Select）の検証を実装しようとしています。しかし、私はこのエラーを得ています：

オブジェクトはReact子として無効です（found：keys {label、value}）。子供のコレクションをレンダリングすることを目的として、代わりに配列を使用してください。

YUPコンセプトの検証スキーマにオブジェクトを割り当てる方法を知りたいです。

_<Formik
  initialValues={{
    department:"",
  }}
  onSubmit={this.submitForm}
  validationSchema={Yup.object().shape({
    department: Yup.object().shape({
      label: Yup.string().required(),
      value: Yup.string().required(),
    }),
})}>
{ props => {
  const {
    values,
    touched,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    selectedOption
  } = props;
  return (
    <React.Fragment>

    <InputLabel shrink htmlFor={'department'}>
    Department</InputLabel>
    <Select
          inputId="department"
          options={options}
          value={values.department}
          onChange={this.onChangeOption}
          onBlur={handleBlur}         
       />
{errors.department && touched.department && ( {errors.department} )} 
Submit </div> </React.Fragment> ); }} 
_
reactjsreact-selectformikyup
7
Taruni

nullable()とrequired()で形スキーマを絞り込むことができます。

例

_const requiredOption = Yup.object()
  .shape({
    value: Yup.string(),
    label: Yup.string(),
  })
  .nullable()
  .required('This field is required.');
_

なぜnullable()とrequired()を形にします。

  1. 入力がフォーカスされ、ユーザが入力をスキップすることを決定した場合、その入力の値はまだNULLに設定され、検証がトリガされます。最終的には、このようなエラーになります。

入力はobject typeでなければなりませんが、最終値は次のとおりです。null。 「NULL」が空の値として意図されている場合は、必ずスキーマを.nullable()としてマークしてください。

  1. Shape Schemaの個々のプロパティに必要な代わりに、すべてのプロパティが必須であると確信している場合は、必要な関数を直接オブジェクト形状に呼び出すことができます。
0
Deepak Kadarivel