reactjs - 无法使用带有 Yup 的 Formik 验证 react 选择

Question

我正在尝试使用蚁酸和是的进行 react 。在此项目中，选择按钮是使用 React Select 在单独的组件中创建的。选择标签的属性作为 Prop 发送。当我在选择标签中选择一个选项时，发生了这个错误。

×错误:对象作为 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" },

];

使用选择

<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}
  />

自定义选择组件

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 存储为字符串而不是对象这一事实。