React JS中Ant Design Modal多次弹出，移除内部map函数后恢复正常问题求解

问题核心表现 #

• 点击触发按钮后Modal会多次重复弹出，移除Modal内部的map循环渲染逻辑后，弹窗恢复正常单次弹出
• 基础的可见状态控制逻辑（visibleVoucherModal的置真、置假）本身无重复触发的bug

常见问题诱因 #

• 列表渲染使用数组下标作为key，破坏React DOM diff的稳定性
  代码中map循环直接用循环索引i作为元素key：当列表数据在Modal挂载过程中发生异步更新时，React无法稳定识别每个列表项的身份，会误判原有DOM节点需要删除重建，连带触发Modal节点的重复挂载，形成多个弹窗实例
• Modal渲染位置错误
  若Modal组件本身被嵌套在任意外层循环渲染逻辑中，map逻辑存在时会生成多份绑定同一visible状态的Modal实例，触发时所有实例同步弹出；移除map后仅保留单份Modal，弹窗自然恢复正常
• 内部列表逻辑触发无意义的重渲染循环
  代码中Checkbox的checked={checked[i] || true}判断逻辑永远返回true，每次父组件重渲染都会触发Checkbox的状态联动，高频重渲染会干扰Antd Modal本身的动画挂载/销毁逻辑，导致残留的弹窗遮罩层、内容层没有被正确清理，视觉上表现为多次弹出
• 未开启Modal的关闭后销毁机制
  弹窗关闭时如果内部DOM节点没有被主动清理，后续重渲染时残留的节点可能被错误触发显示

针对性解决方法 #

• 替换map循环的不稳定key：将<div key={i}>修改为使用列表项唯一标识作为key，即<div key={item.Id}>，保证React可以稳定识别DOM节点，避免无意义的子树重建
• 调整Modal渲染层级：将Modal组件直接放在组件返回的根级渲染节点下，确保没有被嵌套在任何外层循环、动态条件渲染的逻辑中，从根源上避免生成多份Modal实例
• 修正Checkbox的状态绑定逻辑：将checked={checked[i] || true}的错误判断替换为符合业务逻辑的稳定值绑定，比如checked={!!checked[i]}，消除无意义的状态联动和重渲染
• 给Modal补充关闭销毁属性：在Modal标签上加上destroyOnClose参数，弹窗关闭时自动清空内部所有DOM节点，避免残留节点被错误触发
• 对列表渲染逻辑做重渲染隔离：将map循环生成的优惠券列表单独抽成独立子组件，用React.memo做缓存，减少父组件状态变更对Modal子树的影响，降低和Modal动画逻辑的冲突概率

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