isMulti模式下Formik与React-Select配合传值问题修复

多选值无法同步到Formik由3个核心错误导致：

• 未给Select组件显式添加isMulti属性，组件默认运行在单选模式
• 取值逻辑错误：React-Select开启多选后，onChange回调的入参是选中项组成的数组（无选中时为null），不是单选模式下的单个{label, value}对象，原有代码取assignedUsers.value会得到undefined
• 值绑定不匹配：如果Formik字段存的是用户ID等原始值，直接传给Select的value属性无法匹配选项结构，会导致回显异常
• 组件name属性值为users，和Formik中定义的字段名assigned不一致，会影响后续事件绑定、校验的正常触发

1. 给Select组件添加isMulti属性开启多选模式，将name属性值改为和Formik字段一致的assigned
2. 修正onChange取值逻辑，根据接口需要的参数格式处理选中值：
   • 如果接口需要完整的选项对象（含label、value），直接将回调返回的数组赋值给Formik字段即可
   • 如果接口只需要用户ID数组，遍历选中项数组提取每个项的value字段即可
3. 修正value绑定逻辑，保证传入Select的值和options结构匹配，实现正常回显
4. 可选：添加onBlur事件标记字段touched状态，配合错误提示展示

表单配置部分（原有逻辑无需大改，可根据需要移除不必要的页面刷新） #

const validationSchema = Yup.object().shape({
  title: Yup.string().required('A title is required'),
  description: Yup.string().required('A description is required'),
  assigned: Yup.array().required('At least one assigned user is required'),
});

const formik = useFormik({
  initialValues: {
    title: '',
    description: '',
    assigned: [], // 传ID数组/完整选项对象都可以，和onChange逻辑对应即可
  },
  validationSchema,
  validateOnBlur: false,
  validateOnChange: false,
  onSubmit: (data) => {
    ProjectService.create(data).then(() => {
      navigate('/projects');
      // 不需要强制刷新页面，navigate跳转后路由状态会自动更新
      // window.location.reload();
    });
  },
});

用户选择组件部分 #

写法1：Formik存储完整选项对象（最简单，适合前端无需转参数的场景） #

分配给：
<SelectList
  name="assigned"
  isMulti
  options={convertToReactSelectObject(users)}
  onChange={(selectedUsers) => {
    // 无选中时回调返回null，统一兜底为空数组
    formik.setFieldValue('assigned', selectedUsers || []);
  }}
  value={formik.values.assigned}
/>
{formik.errors.assigned ? <div className="err-tip">{formik.errors.assigned}</div> : null}

写法2：Formik只存储用户ID数组（适合后端接口只需要用户ID的场景） #

分配给：
const userOptions = convertToReactSelectObject(users);
<SelectList
  name="assigned"
  isMulti
  options={userOptions}
  onChange={(selectedUsers) => {
    const selectedIds = selectedUsers ? selectedUsers.map(item => item.value) : [];
    formik.setFieldValue('assigned', selectedIds);
  }}
  // 从所有选项中过滤出已选中的选项对象，供React-Select匹配回显
  value={userOptions.filter(option => formik.values.assigned.includes(option.value))}
/>
{formik.errors.assigned ? <div className="err-tip">{formik.errors.assigned}</div> : null}

• 原有Yup校验规则无需修改，只要assigned字段最终为数组类型即可正常校验
• 如果开启了validateOnBlur，需要给Select组件添加onBlur={() => formik.setFieldTouched('assigned', true)}，否则失焦时不会触发该字段的校验
• 提交成功后不建议调用window.location.reload()，强制刷新会清空整个React应用的运行状态，反而可能导致路由跳转异常、用户体验下降

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