为何无法使用Formik修改嵌套对象中的字段值？

安全阿岳

2026-8-20

解决Formik深层嵌套字段无法修改的问题

问题根源

深层嵌套字段（如config.texts.done）无法修改，通常源于两个问题：

表单初始值未完整匹配Schema的嵌套结构，比如config.texts未初始化为对象，Formik无法向不存在的路径写入值
输入控件的name属性未使用正确的点语法关联嵌套字段

修复步骤

1. 同步初始值与Schema结构

你的Yup Schema定义了多层嵌套对象，初始值必须包含所有层级的空对象，否则Formik无法识别目标路径：

const initialValues = {
  text: {
    shortName: "",
    longName: "",
    description: "",
    welcomeMessage: ""
  },
  config: {
    region: "",
    // 必须初始化texts为对象，否则无法修改其下的字段
    texts: {
      done: "",
      title: "",
      description: ""
    }
  }
};

2. 给输入控件设置正确的`name`属性

所有嵌套字段的name必须严格对应Schema的层级，用点连接路径：

// 示例：config.texts.done对应的输入框
<input
  type="text"
  name="config.texts.done"
  onChange={handleChange}
  value={values.config.texts.done}
/>

3. 保留原有验证Schema

你的Yup Schema结构是正确的，无需修改：

const pSchema = object().shape({
  text: object().shape({
    shortName: string().required(),
    longName: string(),
    description: string(),
    welcomeMessage: string()
  }),
  config: object().shape({
    region: string(),
    texts: object().shape({
      done: string(),
      title: string(),
      description: string()
    })
  })
});