React克隆组件触发重复Key警告及无限循环崩溃问题排查

1. 重复Key警告的核心原因 #

你直接将原record对象push到records数组中，新添加的记录和原记录共享同一个id。React渲染列表时依赖唯一的key追踪组件身份，当两个子组件key重复时，就会抛出该警告。

你尝试修改id无效，大概率是修改方式错误：

• 错误操作：直接修改原record的id（会污染原数据，且未克隆record就push的话，仍是同一个对象）
• 错误操作：修改aggData.id（这是外层对象的id，和列表项的key无关，列表项的key应绑定record.id）

正确逻辑是先克隆要复制的record，给克隆后的新记录生成新uuid，再push到数组。

2. 无限循环崩溃的原因 #

当列表出现重复key时，React的diff算法会混乱，无法正确判断组件的更新、卸载逻辑，进而触发异常的重渲染循环，最终导致页面崩溃。若列表渲染逻辑中因key重复引发组件状态异常，会进一步加剧循环问题。

修复方案 #

修改hanldeCloneRecord函数，确保克隆新记录并生成唯一id：

const hanldeCloneRecord = (record) => {
    // 克隆单个record，避免直接使用原对象
    const clonedRecord = _.cloneDeep(record);
    // 为克隆后的记录生成新的唯一id
    clonedRecord.id = KocoUtils.uuidv4();
    
    let newData = _.cloneDeep(aggData);
    newData.records.push(clonedRecord);
    setAggData(newData);
};

同时检查列表渲染代码，确保列表项的key绑定record.id，示例：

{aggData.records.map(record => (
    <RecordItem key={record.id} record={record} />
))}

内容的提问来源于stack exchange，提问作者Huzaifa Bin Zahoor