使用splice复制数组元素时ID异常求助：ID重复且类型错误

问题根源 #

1. 引用指向同一对象：你直接将list.cards[index]赋值给duplicate_item，这只是复制了对象引用而非创建新对象，导致修改duplicate_item.id时，原数组里的元素ID也会被同步修改。
2. ID类型不符合要求：直接将list.cards.length + 1赋值给ID，得到的是数字类型，没有转换为字符串。

修复方案 #

先拷贝原元素生成独立新对象，再为新对象生成字符串类型的唯一ID，最后插入数组。

修改后的代码 #

const duplicateCard = (index, listId) => {
    // 拷贝目标列表，避免直接修改原状态
    const targetList = { ...data.lists[listId] };
    // 深拷贝要复制的卡片，断开与原对象的引用
    const duplicate_item = { ...targetList.cards[index] };
    // 生成字符串类型的新ID
    duplicate_item.id = `${targetList.cards.length + 1}`;
    // 将新卡片插入数组
    targetList.cards.splice(0, 0, duplicate_item);
    
    const newState = {
      ...data,
      lists: {
        ...data.lists,
        [listId]: targetList,
      },
    };
    setData(newState);
    window.localStorage.setItem("datt", JSON.stringify(newState));
};

关键改动说明 #

• 用{ ...targetList.cards[index] }浅拷贝原卡片对象（如果卡片是多层嵌套结构，建议用JSON.parse(JSON.stringify(原对象))做深拷贝），确保新对象与原对象完全独立。
• 通过模板字符串${}将数字ID转换为字符串类型，满足格式要求。
• 先拷贝targetList再修改，避免直接操作原data中的对象，符合不可变数据的处理规范。

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