使用Formik FieldArray时无法修改Material-UI TextField的值如何解决

问题根因 #

TextField的value属性被硬编码为固定值Group ${index+1}，没有绑定Formik维护的表单状态。即便setFieldValue成功更新了Formik内部状态，输入框的展示值始终会被硬编码的固定值覆盖，因此表现为无法修改的只读状态。
默认值不应该直接写死在输入框的value属性上，需要统一在Formik的初始值配置中声明。

修正方案 #

步骤1：配置初始值 #

在Formik的initialValues中提前配置数组项的默认值，动态新增FieldArray项时也在新增逻辑中指定初始值：

// Formik根组件配置示例
<Formik
  initialValues={{
    myGroups: [
      { myGroupName: "Group 1" },
      { myGroupName: "Group 2" }
    ]
  }}
  {/* 其余Formik配置 */}
>
  {({ values, setFieldValue }) => (
    {/* 你的组件代码，FieldArray逻辑写在这里 */}
  )}
</Formik>

// 动态新增FieldArray项时的示例
arrayHelpers.push({ myGroupName: `Group ${values.myGroups.length + 1}` })

步骤2：修改TextField属性 #

将TextField的value绑定到Formik维护的values对应字段：

<TextField
  name={`myGroups.${index}.myGroupName`}
  value={values.myGroups[index].myGroupName}
  label="Group"
  InputProps={{ style: { backgroundColor: "white" }}}
  autoComplete="off"
  onChange={(e) => setFieldValue(`myGroups.${index}.myGroupName`, e.target.value)}
/>

如果是配合Formik的Field组件使用，只需要传name属性即可自动同步value和onChange，不需要手动绑定。

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