JavaScript如何向嵌套数组的指定索引位置插入对象

错误原因排查 #

• 数组插入逻辑错误：你使用slice方法尝试插入元素，但slice仅用于截取数组片段，不支持插入操作，你传入的(idx+1, 0, item)不符合slice入参规则，只会返回空数组，直接导致invoices被赋值为空。
• 对象赋值语法错误：data[index] = { ...data[index] = { ... } }的嵌套赋值写法逻辑混乱，会导致属性覆盖异常。
• 状态取值风险：直接从外部datas取值容易遇到状态过期问题，优先从setDatas函数式更新的prevState中取最新值更稳妥。

解决方案 #

要在数组指定位置插入元素，正确的扩展运算符写法为[...原数组.slice(0, 插入位置), 待插入元素, ...原数组.slice(插入位置)]，同时修正赋值逻辑即可。

修正后的代码 #

const handleDuplicate = (index, insertIdx, item) => {
  setDatas(prevState => {
    // 复制整个listInvoice数组避免直接修改原状态
    const newListInvoice = [...prevState.listInvoice]
    // 复制当前要修改的数组项
    const targetItem = {...newListInvoice[index]}
    // 向指定位置插入元素
    targetItem.invoices = [
      ...targetItem.invoices.slice(0, insertIdx),
      item,
      ...targetItem.invoices.slice(insertIdx)
    ]
    // 替换对应位置的项
    newListInvoice[index] = targetItem
    // 返回新状态
    return {
      ...prevState,
      listInvoice: newListInvoice
    }
  })
}

如果要实现示例中在no: '1'的list数组下标1位置插入{val: '2'}，按对应参数调用即可：handleDuplicate(0, 1, {val: '2'})。

内容的提问来源于stack exchange，提问作者Muhamad Rahmat Setiawan