Formik搭配react-select无法获取选中值，如何正确设置选中字段值？

核心问题 #

react-select的选中值需要是完整的选项对象，但你当前仅给Formik设置了selectedOption.value（字符串/数值类型），导致react-select无法匹配到对应的选项，因此下拉框无法显示选中状态。

修复步骤 #

1. 统一Formik存储的值类型
   让Formik的businessCategory字段存储完整的选项对象，而非仅存value字段。修改onChange中的setFieldValue调用：

   onChange={selectedOption => {
     console.log("sel opt is", selectedOption);
     handleBusinessCat(selectedOption.value);
     // 存储完整选项对象到Formik
     validation.setFieldValue("businessCategory", selectedOption);
   }}
   

2. 绑定react-select的value属性
   给react-select直接绑定Formik中存储的完整对象作为选中值：

   <Select
     value={values.businessCategory}
     onChange={/* 上述处理函数 */}
     options={yourOptionsArray}
     // 其他配置属性...
   />
   

3. 调整验证逻辑（按需）
   如果验证规则针对选项的value字段，在Schema中指定验证对象的对应属性即可：

   const validationSchema = Yup.object().shape({
     businessCategory: Yup.object().shape({
       value: Yup.string().required("请选择业务分类")
     })
   });
   

特殊场景处理（若需仅存value） #

如果业务需求必须在Formik中存储value而非完整对象，需手动在react-select的value属性中匹配对应选项：

<Select
  value={yourOptionsArray.find(opt => opt.value === values.businessCategory)}
  onChange={selectedOption => {
    handleBusinessCat(selectedOption.value);
    validation.setFieldValue("businessCategory", selectedOption.value);
  }}
  options={yourOptionsArray}
/>

注意需确保yourOptionsArray可访问，且选项更新时能正确匹配。

内容的提问来源于stack exchange，提问作者Saurav Prakash