React中使用Array.splice复制状态数组时生成空数组的问题

你这里踩了个常见的API理解坑——Array.splice()根本不是用来复制数组的！

splice()的核心作用是直接修改原数组：它可以删除、插入或替换数组元素，而它的返回值是被删除的元素组成的数组。当你不带任何参数调用splice()时，没有元素被删除，所以自然返回空数组，这就导致你的newState是空的，后续push也就没用了。

在React中更新数组状态，我们需要创建原数组的浅拷贝（因为React依赖状态的不可变性来检测更新，直接修改原state数组不会触发重新渲染），给你推荐几种常用的正确复制方式：

• 扩展运算符（最简洁）：

  const newRegistrations = [...this.state.registrations];
  

• Array.slice()（经典方法）：

  const newRegistrations = this.state.registrations.slice();
  

• Array.from()：

  const newRegistrations = Array.from(this.state.registrations);
  

把你的addRegistration方法改成这样就能正常工作了：

addRegistration(registration) {
  console.log('came inside event handler to add registration')
  console.log(registration)
  console.log('existing state')
  console.dir(this.state.registrations)
  
  // 正确复制原数组
  const newRegistrations = [...this.state.registrations];
  // 添加新的注册信息
  newRegistrations.push(registration);
  // 必须通过setState更新状态，触发组件重新渲染
  this.setState({ registrations: newRegistrations });
  
  console.log(newRegistrations);
}

额外提醒：永远不要直接修改this.state里的数组或对象，一定要基于副本修改后再通过setState更新，这样React才能正确感知状态变化，更新组件视图。

内容的提问来源于stack exchange，提问作者Knows Not Much