Formik隐藏字段提交未返回值及动态设置初始值相关问题咨询

问题根源与解决方案 #

1. 隐藏字段无法按预期格式提交的问题 #

你手动给type="hidden"的Field组件绑定了value属性，覆盖了Formik内置的状态绑定逻辑。Formik的所有Field组件默认会自动从initialValues中读取对应name路径的值，也会自动同步状态更新，不需要手动赋值。
你只需要在初始化Formik的initialValues时，提前给每一个friends数组项配置好something、type的默认值即可，提交时会自动按{name: value}的格式携带这两个隐藏字段的值。

2. 可编辑字段无法修改、onChange不生效的问题 #

• 你给可编辑Field硬写了value=" "，相当于把受控组件的值写死为空字符串，自然无法修改
• 你给onChange传的是字符串"formik.handleChange"，不是函数引用，触发事件时自然会返回undefined
  可编辑字段的默认值同样统一放在initialValues里配置即可，不需要手动给Field传value属性，Formik会自动完成绑定。

修改后的代码示例 #

第一步：配置initialValues

// Formik初始化部分
<Formik
  initialValues={{
    friends: yourFriendsArray.map(item => ({
      something: item.something.text, // 隐藏字段默认值
      type: item.something.type, // 隐藏字段默认值
      somethinelse: " " // 可编辑字段默认值，未修改就提交该值
    }))
  }}
  // 其他配置：onSubmit、validationSchema等
>

第二步：简化Field组件写法

<Field
  type="hidden"
  name={`friends[${index}].something`}
/>
<Field
  type="hidden"
  name={`friends[${index}].type`}
/>
<Field
  className={classes.textField}
  component={TextField}
  label={something.text}
  name={`friends[${index}].somethinelse`}
/>

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