如何使用splice向对象数组插入对象？出现TypeError报错如何解决？

你使用splice的逻辑没有问题，报错TypeError: Cannot add property 2, object is not extensible的核心原因是你操作的designs数组是不可扩展对象，通常是被Object.freeze()冻结、或是框架层面标记为只读的响应式数据（比如React的state变量、Vue3的readonly返回值），这类对象不允许修改原结构，调用会修改原数组的splice方法就会触发报错。

不同场景的最优更新方案 #

• 普通JS场景，不需要保留原数组：先对原数组做浅拷贝再操作

const file = "file-name-example"
// 浅拷贝得到可修改的新数组
const newDesigns = [...designs]
newDesigns.splice(currentIndex, 0, {
    image: file,
    positions: [0,0,1] 
})
// 后续使用newDesigns代替原designs即可

• React状态管理场景：直接操作state会触发不可变限制，需基于旧state返回新数组

setDesigns(prev => {
  const newDesigns = [...prev]
  newDesigns.splice(currentIndex, 0, {
    image: file,
    positions: [0,0,1]
  })
  return newDesigns
})

• Vue3场景：如果designs是用readonly定义的响应式变量，改为普通ref/reactive定义的响应式变量后再调用splice即可。

splice本身就是在指定位置插入数组元素的高效方案，只要操作的是可修改的普通数组就不会出现问题，不需要调整splice的使用逻辑。

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