Formik中react-select组件reset与setFieldValue失效问题求解

架构老林

2026-8-10

解决Formik结合react-select的重置与预填无响应问题

问题现象

在使用Formik构建的表单中，搭配react-select多选组件时出现以下异常：

点击重置按钮调用resetForm()，react-select组件无法清空选中项
通过按钮调用setFieldValue预填表单值时，react-select组件无响应，但Formik的表单值已正确更新

问题原因

自定义的SelectField组件未将Formik存储的纯字符串数组格式值，转换为react-select组件所需的{value, label}对象数组格式。react-select无法识别纯字符串数组作为选中值，因此无法同步Formik的状态变化。

解决方案

修改SelectField组件，将Formik的字段值转换为react-select兼容的格式，并绑定到组件的value属性上，同时保持原有的onChange逻辑不变：

修改后的SelectField.js

import React from "react";
import Select from "react-select";
import { useField } from "formik";

export default function SelectField(props) {
  const [field, state, { setValue, setTouched }] = useField(props.name);

  // 将Formik的纯字符串数组转换为react-select需要的{value, label}格式
  const selectedValues = field.value.map(item => ({
    value: item,
    label: item
  }));

  const onChange = (value) => {
    let arrValue = [];
    value.map((k) => arrValue.push(k.value));
    setValue(arrValue);
  };

  return (
    <Select
      {...props}
      isMulti
      value={selectedValues}
      onChange={onChange}
      onBlur={setTouched}
    />
  );
}