添加新对象到数组后旧数据被覆盖的前端问题求助

核心问题 #

你遇到的是JavaScript引用类型的浅拷贝陷阱：所有数组元素都指向同一个config对象的内存引用，每次修改config['0']的属性，都会同步改变数组中所有引用该对象的元素，导致旧数据被新值覆盖。

代码问题分析 #

1. 你一直在修改同一个config对象的属性，没有为新元素创建独立的对象实例
2. cart.slice()是浅拷贝，只会复制数组的结构，数组内的对象还是原来的引用；push进去的config还是同一个内存地址的对象，所以所有项都会同步变化

修复方案 #

每次添加新元素时，创建一个全新的对象，而不是复用同一个config引用。可以用对象扩展运算符{...}或者Object.assign()来实现（这里因为是单层对象，浅拷贝新对象就足够）。

修改后的代码 #

var news = []
var next = cart?.length ?? 0 // 简化null/undefined判断
switch(type){
  case 'horizontal':
    // 每次创建新的对象，避免复用同一个引用
    const newItem = {
      ...config['0'], // 复制原config的基础属性
      type: type,
      id: next,
      idImg: selectSvg
    }
    if(!cart || cart.length < 1){
      news.push(newItem)
    }else {
      news = [...cart, newItem] // 用扩展运算符创建新数组，替代slice()
    }
    setCountCart(news.length)
    localStorage.setItem('cart-tagstyle', JSON.stringify(news))
    setCart(news)
    break;
}

额外说明 #

• 不要直接修改原config对象，而是基于它创建新对象，保证每个数组元素都是独立的引用
• 用...cart替代cart.slice()，语义更清晰，同样是创建新数组的浅拷贝，但配合新创建的newItem，就能避免引用冲突

内容的提问来源于stack exchange，提问作者Антирка YT