Formik搭配Yup验证react-select时出现Objects are not valid as a React child错误如何解决

• 核心触发点：你在 <p> 标签中直接渲染了对象类型的错误信息。你的Yup校验规则是对country对象下的id字段做必填校验，当校验不通过时，formik.errors.country是结构为{id: "Please select a country"}的对象，而非字符串，React不允许直接将对象作为子元素渲染，因此抛出该报错。
• 额外不匹配点：
  1. React Select要求value属性的结构和options单条选项的结构完全一致，你既没有给自定义组件绑定value属性，formik.values.country的结构也和选项结构不匹配（初始是空对象，选中后是字符串类型的id），会导致选择器无法正常识别选中项。
  2. 你给React Select传的isClearable是字符串"true"，而非布尔值true，可能引发不可预期的异常。

步骤1：调整Formik配置 #

修改初始值和校验规则，适配未选择状态和对象类型的存储要求：

import * as Yup from 'yup';
import { useFormik } from 'formik';

const formik = useFormik({
  initialValues: {
    country: null // 未选择时用null代替空对象，更符合语义
  },
  validationSchema: Yup.object({
    country: Yup.object({
      id: Yup.string().required('Please select a country'),
    }).nullable() // 新增nullable配置，适配清空时的null值
  })
})

步骤2：调整选择器调用逻辑 #

绑定value属性，修改赋值逻辑，传入正确的错误信息：

<XSearchSelect
  label="Country"
  options={countryOptions}
  id="country"
  name="country"
  value={formik.values.country} // 绑定formik存储的选中对象
  onBlur={()=>{
    formik.handleBlur({ target: {name:'country'} });
  }}
  // 直接存储完整的option对象，同时匹配React Select和Yup的结构要求
  onChange={(option) => {formik.setFieldValue("country", option);}}
  error={formik.errors.country?.id} // 取嵌套的id字段错误信息，保证是字符串类型
  touched={formik.touched.country}
/>

步骤3：修正自定义组件的属性传值 #

把isClearable改为布尔值类型：

// XSearchSelect组件内的Select组件
<Select
  isClearable={true} // 改成布尔值，不要传字符串
  // 其余原有属性保持不变
/>

如果最终提交表单时只需要国家id，提交时取formik.values.country.id即可。

内容的提问来源于stack exchange，提问作者Nimni Almeida