如何处理Ant Design动态表单域中radio button选中值不同步的问题

问题根因 #

单选框的视觉互斥效果是原生name属性的默认行为，仅控制UI展示，不影响你维护的表单状态值。你当前的逻辑只在选中radio时修改了当前点击条目的对应字段为primary，没有同步重置其他邮箱条目的同名字段，导致旧的选中值一直残留在状态中。

修复方案 #

核心逻辑 #

radio选中事件触发时，遍历所有邮箱条目，仅给当前选中的条目赋值primary，其余条目对应的主邮箱字段统一重置为undefined，再将更新后的完整列表覆盖到表单状态。

基础实现代码示例 #

// 假设邮箱列表存在state中，每个条目结构为 {email: '', isPrimary: undefined, id: 唯一标识}
const handlePrimarySelect = (currentId) => {
  const updatedList = emailList.map(item => ({
    ...item,
    // 仅当前选中的条目设为primary，其余全部清空
    isPrimary: item.id === currentId ? 'primary' : undefined
  }))
  setEmailList(updatedList)
}

组件库适配场景（以Ant Design Form为例） #

如果你用的是Form.List管理动态字段，直接调用Form的批量更新方法即可：

const handlePrimarySelect = (currentIndex) => {
  form.getFieldValue('emailList').forEach((_, index) => {
    form.setFieldValue(`emailList[${index}].isPrimary`, index === currentIndex ? 'primary' : undefined)
  })
}

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