React addons update结合$splice：如何向对象数组插入对象？

这个报错其实已经说得很直白了：$splice是专门用来操作数组的，但你代码里的lanes是个对象（[object Object]），完全不符合它的使用要求，所以才会触发这个错误。咱们一步步拆解解决：

先明确问题根源 #

你用到的update方法（不管是React addons自带的还是第三方的immutability-helper库）里，$splice操作符的核心前提是：它的操作目标必须是数组，用来完成数组元素的删除、插入等操作。但你的lanesData.lanes是一个对象类型，自然就踩了这个雷。

分两种场景解决 #

场景1：你本来就想让lanes是数组 #

那先去检查你的state初始化代码，是不是不小心把lanes写成对象了？正确的数组结构应该是这样的：

this.state = {
  lanesData: {
    lanes: [ // 这里必须是数组
      { id: 1, content: 'lane1' },
      { id: 2, content: 'lane2' }
    ]
  }
}

如果初始化时lanes确实是数组，再确认dragIndex、hoverIndex是不是有效的数组索引（没有越界）。确认没问题后，你原来的代码就能正常运行：

this.setState(
  update(this.state, { 
    lanesData: { 
      lanes: { 
        $splice: [ 
          [dragIndex, 1], 
          [hoverIndex, 0, dragLane] 
        ], 
      } 
    } 
  })
);

场景2：lanes确实是对象（比如键值对结构） #

如果你的lanes是像{ key1: laneObj1, key2: laneObj2 }这样的键值对对象，那$splice肯定用不了，得换成适合操作对象的操作符：

• 要是想新增一个键值对，用$merge：

this.setState(
  update(this.state, {
    lanesData: {
      lanes: {
        $merge: { [newKey]: dragLane } // newKey是你要新增的键名
      }
    }
  })
);

• 要是想替换某个已有键的值，用$set：

this.setState(
  update(this.state, {
    lanesData: {
      lanes: {
        [targetKey]: { $set: dragLane } // targetKey是要替换的键名
      }
    }
  })
);

另外，如果你的业务场景需要“插入到某个位置”这种数组式的操作（比如拖拽排序），那更建议把lanes转换成数组结构，这样才能用$splice轻松实现需求。

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