无法使用 Formik 和 Yup 验证 react-select

Question

我正在尝试使用甲酸和是的反应。在这个项目中，selection 按钮是使用 React Select 在单独的组件中创建的。 select 标签的属性作为道具发送。当我在selection标签中select一个选项时，出现这个错误。

× 错误：对象作为 React 子项无效（找到：具有键 {id} 的对象）。如果您打算渲染一组子项，请改用数组。

是的验证方法

country: Yup.object({id: Yup.string().required('Please select a country'),}),

初始数据：

const formik = useFormik({
initialValues: {
    country: {}
  }
})

这是选项

const countryOptions = [
{ id:"1", value: "india", label: "India" },
{ id:"2", value: "sri lanka", label: "Sri Lanka" },
{ id:"3", value: "us", label: "US" },

];

使用select离子

<XSearchSelect
     label="Country"
     options={countryOptions}
     id="country"
     name="country"
     onBlur={()=>{
              formik.handleBlur({ target: {name:'country'} });
            }}
     onChange={(option) => {formik.setFieldValue("country",option.id);}}
     error={formik.errors.country}
     touched={formik.touched.country}
  />

定制select离子组分

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

const XSearchSelect = ({ value, onChange, options, label,error,onBlur,id,name,touched }) => {

return (
    <div>
        <div className="block text-xaplink_gray_3 text-sm font-bold mb-2">{label}</div>
        <Select
            isClearable="true"
            value={value}
            options={options}
            onChange={onChange}
            id={id}
            name={name}
            onBlur={onBlur}
            theme={theme => ({
                ...theme,
                borderRadius: 5,
                colors: {
                  ...theme.colors,
                  primary25: 'silver',
                  primary50: 'gray',
                  primary: 'black',
                },
              })
            }
        />
        {touched && error ? (
     <p className='text-xs pl-2    text-xaplink_red_2 mb-4'>{error}</p>
   ) : null}
    </div>
)
}

导出默认 XSearchSelect

Answer 1

您遇到的问题是您尝试在此处呈现 error：

<p className='text-xs pl-2 text-xaplink_red_2 mb-4'>{error}</p>

但它是一个对象，正如您在初始值中所描述的那样。您可能想将 error={formik.errors.country.id} 传递给 <XSearchSelect /> 组件。

或者，作为另一种选择，您可以将国家/地区 ID 作为字符串存储在 Formik 中，如下所示：

const formik = useFormik({
initialValues: {
    country: ""
  }
})

这样您之前的代码应该可以进行一些更新，坚持您现在将 ID 存储为字符串而不是对象这一事实。

无法使用 Formik 和 Yup 验证 react-select

Can't validate react-select using Formik with Yup

reactjs

yup

formik