Formik Select组件提交返回[object Object]问题求助

问题原因 #

HTML原生<select>的<option>标签的value属性仅支持字符串类型。当你把对象直接赋值给value时，浏览器会自动将对象转换为字符串[object Object]，这就是提交表单后values.patient得到该结果的根本原因。

解决方案 #

方案1：用唯一标识（如ID）作为value，提交后匹配原数据

这是最常用且稳妥的方式，利用patient的唯一ID作为选项值，提交后从原数组中找到对应的完整对象：

// 重构patientOptions，用id作为value
const patientOptions = patient.map((patient) => ({
  key: `${patient.firstName} ${patient.middleName} ${patient.lastName}`,
  value: patient.id,
  label: `${patient.firstName} ${patient.middleName} ${patient.lastName}`
}));

// 提交时根据id匹配完整对象
const onSubmit = (values) => {
  const selectedPatient = patient.find(p => p.id === values.patient);
  console.log("form data", { patient: selectedPatient });
};

// Formik初始化值对应id类型（空或默认id）
<Formik
  initialValues={{
    patient: "",
  }}
  onSubmit={onSubmit}
>
  <Form>
    <FormikControl
      control="select"
      name="patient"
      label="Patient"
      options={patientOptions}
    />
  </Form>
</Formik>

方案2：将对象序列化为JSON字符串存储，提交后解析

如果必须直接传递对象结构，可以把对象转为JSON字符串存在value中，提交时再解析回来：

// 把对象转为JSON字符串作为value
const patientOptions = patient.map((patient) => ({
  key: `${patient.firstName} ${patient.middleName} ${patient.lastName}`,
  value: JSON.stringify({
    id: patient.id,
    firstName: patient.firstName,
    middleName: patient.middleName,
    lastName: patient.lastName,
  }),
  label: `${patient.firstName} ${patient.middleName} ${patient.lastName}`
}));

// 提交时解析JSON字符串为对象
const onSubmit = (values) => {
  const selectedPatient = values.patient ? JSON.parse(values.patient) : null;
  console.log("form data", { patient: selectedPatient });
};

<Formik
  initialValues={{
    patient: "",
  }}
  onSubmit={onSubmit}
>
  <Form>
    <FormikControl
      control="select"
      name="patient"
      label="Patient"
      options={patientOptions}
    />
  </Form>
</Formik>

方案3：使用支持对象值的第三方Select组件

改用基于React封装的非原生Select组件（如react-select），这类组件支持直接将对象作为选项值，无需转换：

// 先安装react-select：npm install react-select
import Select from 'react-select';

// 重构options为react-select要求的格式
const patientOptions = patient.map((patient) => ({
  value: {
    id: patient.id,
    firstName: patient.firstName,
    middleName: patient.middleName,
    lastName: patient.lastName,
  },
  label: `${patient.firstName} ${patient.middleName} ${patient.lastName}`
}));

// 在Formik中使用react-select
<Formik
  initialValues={{
    patient: null, // 初始值设为null而非空字符串
  }}
  onSubmit={(values) => {
    console.log("form data", { patient: values.patient });
  }}
>
  {({ setFieldValue, values }) => (
    <Form>
      <label>Patient</label>
      <Select
        value={values.patient}
        onChange={(option) => setFieldValue('patient', option.value)}
        options={patientOptions}
      />
      <button type="submit">提交</button>
    </Form>
  )}
</Formik>

额外提示 #

检查你的FormikControl组件实现——如果它是基于原生<select>封装的，就会受限于字符串value的限制。如果要在现有封装下支持对象值，需要在FormikControl内部添加序列化/反序列化的逻辑。

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