JavaScript React中如何通过展开运算符一行实现数组元素替换更新状态

你可以同时对顶层对象和内部items数组使用展开运算符，配合数组slice方法仅替换目标下标位置的元素，一行实现不可变更新：

const newCurrentStageData = { 
  ...currentStageData, 
  items: [
    ...currentStageData.items.slice(0, index), 
    newRow, 
    ...currentStageData.items.slice(index + 1)
  ] 
}

原理解释 #

1. 先展开原currentStageData复制所有顶层属性
2. 单独重写items数组：
   • 用slice(0, index)取出目标下标之前的所有元素，展开后保留
   • 插入你需要替换的新元素newRow
   • 用slice(index + 1)取出目标下标之后的所有元素，展开后保留

全程没有修改原对象和原数组，符合状态更新的不可变要求。

其他说明 #

你目前在用的实现方式存在隐患：展开currentStageData的时候只复制了顶层对象，内部的items数组还是和原对象共享引用，你修改newCurrentStageData.items[index]的时候，原currentStageData.items也会被同步修改，推荐用上述写法避免该问题。

你之前语法报错的原因是：对象字面量的键只能是顶层属性名，不能直接用链式写法newCurrentStageData.items[index]定位嵌套属性做重写，所以语法不合法。

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