Formik下使用setFieldValue为嵌套数组areaName设置动态默认值

问题核心解决逻辑 #

你的数据层级为 areaGroups（数组）→ 单个group对象 → areaInfo（数组）→ 单个area对象 → areaName，按需求提供两种实现方案： #

方案1：push时直接构造正确初始值（推荐，无需额外调用setFieldValue） #

不用处理路径拼接，也不会出现Formik状态异步更新导致的取值错误：

<Button       
  onClick={() => {
    // 计算新增区域的序号：当前areaGroups长度 + 1
    const newAreaSerial = values.areaGroups.length + 1;
    // 构造符合格式的新group payload
    const newAreaPayload = {
      name: null,
      areaInfo: [
        {
          areaName: `Area ${newAreaSerial}`,
          areaCode: null
        }
      ]
    }
    // 直接push即可完成赋值
    arrayHelpers.push(newAreaPayload)
  }}     
>
  Add Area
</Button>

方案2：如需用setFieldValue实现，路径拼接规则 #

Formik嵌套字段路径完全遵循JS对象访问逻辑，数组索引直接拼在对应层级后即可。你需要命中的是「新增的第N个group下areaInfo数组第0个元素的areaName」，路径拼接规则如下：

<Button       
  onClick={() => {
    // 提前存下push前的长度，避免push后长度更新导致索引错误
    const preLength = values.areaGroups.length;
    arrayHelpers.push(emptyAreaPayload)  
    formikProps.setFieldValue(                                                    
      `areaGroups.${preLength}.areaInfo.0.areaName`,
      `Area ${preLength + 1}`
    )
  }}     
>
  Add Area
</Button>

注意你原写法中push的emptyAreaInfo结构错误，areaGroups数组的每个元素应该是和emptyAreaPayload一致的结构。

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