Chakra Modal包裹Formik FieldArray时字段name与ID异常问题

问题根因 #

你遇到的问题本质是Modal复用逻辑错误：

• 你在FieldArray的循环遍历中，给每一个locations数组项都渲染了一个独立的Modal组件
• 所有Modal共用了同一个isOpen状态控制显隐，触发打开操作时所有循环生成的Modal会同时渲染
• 最后一次遍历生成的Modal会层级覆盖前面所有Modal，因此你看到的表单永远是数组最后一项的字段配置

修复方案 #

你不需要为每一项单独生成Modal，仅保留一个全局公共Modal即可，通过状态记录当前操作的数组下标来绑定表单字段：

1. 新增状态记录当前操作的数组下标

// 新增状态
const [activeLocationIndex, setActiveLocationIndex] = useState(null)

2. 将Modal组件从FieldArray的循环中移除，放到表单外层的任意位置
3. 修改打开Modal的触发逻辑，点击对应项的按钮时传入当前下标

const handleOpenModal = (e, index) => {
  setActiveLocationIndex(index)
  // 原有打开Modal的逻辑
  setIsOpen(true)
}

// 循环中的按钮调用时传入当前index
<Button
  // 其余属性不变
  onClick={(e) => handleOpenModal(e, index)}
>

4. 修改Modal内表单的字段绑定逻辑，使用记录的activeLocationIndex替代循环的index

<Input
  name={`locations.${activeLocationIndex}.facebookUrl`}
  value={formik.values.locations[activeLocationIndex]?.facebookUrl ?? ''}
  // 其余属性不变
/>

5. 关闭Modal时重置下标避免状态污染

const onClose = () => {
  setIsOpen(false)
  setActiveLocationIndex(null)
}

额外优化建议 #

• 循环渲染的列表项key不要用Math.random()、id+1这类不稳定/易重复的值，优先用每条数据的唯一业务ID，无业务ID时再使用index加固定前缀作为key
• 可以对activeLocationIndex做非空判断，避免Modal打开前取值报错

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