ReactJS中如何向useState管理的数组的指定索引位置插入元素

结论 #

你当前的实现不正确，存在两处核心问题：

• 违反React状态不可变原则：splice属于原地修改数组的方法，直接修改原数组引用后，React浅比较状态引用未发生变化，不会触发组件重渲染，视图无法同步更新。
• 外部actsArray与状态acts不同步：如果该变量声明在函数组件内部，组件每次重渲染都会将actsArray重置为空数组，之前存储的内容会直接丢失，无法正常维护状态。

正确实现方案 #

实现的核心逻辑是：始终基于原状态数组生成新的数组引用，再调用setter更新状态，有两种常用写法：

写法1：数组拷贝+splice修改

const [acts, setActs] = useState([])

const addItem = (index) => {
  // 浅拷贝原状态数组，避免修改原引用
  const newActs = [...acts]
  // 在拷贝数组的指定位置插入元素
  newActs.splice(index, 0, 'should be here')
  // 传入新数组更新状态
  setActs(newActs)
}

// 调用时传入索引4即可在第4位插入元素
// addItem(4)

写法2：slice拼接（无原地修改操作）

const addItem = (index) => {
  setActs([
    // 截取原数组索引0到index的部分
    ...acts.slice(0, index),
    // 插入目标元素
    'should be here',
    // 拼接原数组从index开始的剩余部分
    ...acts.slice(index)
  ])
}

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