React动态创建对象时新增Layout组件复制旧组件属性问题求助

• 基于React开发表单动态生成对象功能时，新增Layout组件会自动复制其他已存在Layout组件的属性，暂未定位问题根因
• 稳定复现场景：添加第一个Layout组件并为其添加Calculator子元素后，后续新增的Layout组件会默认携带完全相同的Calculator子元素
• 对应复现代码托管在CodeSandbox平台，判断问题修复逻辑本身复杂度较低

• 优先检查新增组件的初始值定义：这类问题绝大多数是因为组件初始配置对象定义在全局/组件外部作用域，或者新增时直接复用了已有组件的配置对象引用，没有切断引用关联，导致React状态更新时多个组件的配置指向同一块内存，出现属性联动
• 其次检查状态更新逻辑：定位新增Layout组件的处理函数，确认是否存在直接把已有Layout的children、props字段赋值给新组件的写法，这类直接赋值会保留对象引用
• 最后检查动态列表渲染逻辑：确认动态生成的组件列表是否使用数组索引作为key，索引作为key时，组件增删过程中虚拟DOM可能出现错误复用，把旧组件的属性挂载到新渲染的组件上

• 修正初始配置的作用域与引用：每次新增Layout时，在新增处理函数的作用域内部生成全新的初始配置对象，children字段固定初始化为空数组，不要引用任何已存在的配置对象，参考写法：

const addNewLayout = () => {
  // 每次执行函数都生成全新的配置对象，无外部引用
  const newLayout = {
    id: `${Date.now()}_${Math.random().toString(36).slice(2)}`,
    type: 'Layout',
    props: {},
    children: [] // 初始子元素永远为空数组
  }
  setFormSchema(prev => [...prev, newLayout])
}

• 若业务需要基于已有组件配置生成新组件，必须对原配置做深拷贝切断引用后再修改，简单场景可使用原生structuredClone()方法实现深拷贝，禁止直接把已有配置对象的引用赋值给新组件
• 修正动态列表的key绑定：给每个动态生成的组件分配全局唯一ID（新增组件时同步生成），渲染时使用该唯一ID作为列表项的key，禁止使用数组索引作为key，避免虚拟DOM复用异常

额外注意：如果项目中接入了Formily、React Hook Form这类表单状态管理库，需要同步检查库层面的字段值绑定逻辑，确认是否存在同名字段默认继承已有值的配置问题

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