如何从Formik初始值中取值并回传给React Select实现内容回填？

解决方案 #

1. 修正onChange回调逻辑 #

现有代码的onChange存在两处错误：

• setFieldValue的第一个参数是字符串类型的字段名，不需要额外包裹对象大括号
• 开启isMulti={true}时，react-select的onChange回调返回参数是所有选中项组成的对象数组，而非单个选中项，不需要提取value属性，直接存储整个数组即可匹配你初始值的结构。

2. 填充value属性 #

react-select多选模式的value属性要求传入与options结构一致的对象数组（每个元素包含value、label字段），你存在Formik中的groupValues刚好符合这个结构，直接从Formik的values中取对应字段即可。

修正后的完整组件代码如下：

<ReactSelect
   options={myGroupOptions}   
   isMulti={true}
   name={`allGroups.${index}.groupValues`}
   onChange={(selectedOptions) => formikProps.setFieldValue(`allGroups.${index}.groupValues`, selectedOptions)}
   onBlur={formikProps.handleBlur}
   value={formikProps.values.allGroups[index].groupValues}
 />

额外补充说明 #

如果你的myGroupOptions结构和API返回的groupValues结构不匹配（比如字段名不是value/label），可以通过react-select的getOptionValue、getOptionLabel props自定义取值逻辑，保证初始值和选项的取值规则一致即可正常回填。

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