React中解构对象后出现TypeError: "x" is (not) "y"的原因

这个问题的核心是你解构赋值的目标对象搞错了，咱们一步步拆解来看：

错误的解构写法分析 #

你的报错代码里，解构语句是这样的：

deletePersonHandler = (personIndex) => { 
  const { persons } = this.state.persons; 
  persons.splice(personIndex, 1); 
  this.setState({ persons }); 
}

这里的this.state.persons本身是一个数组，你却试图从这个数组里解构出名为persons的属性——但数组是按索引访问的集合，根本没有persons这个键，所以解构出来的persons变量是undefined。之后调用persons.splice()自然就会抛出TypeError: undefined is not a function（也就是你看到的"x" is (not) "y"类型错误）。

正确的解构写法 #

你应该从this.state这个对象里解构persons属性，而不是从this.state.persons数组里解构：

deletePersonHandler = (personIndex) => { 
  const { persons } = this.state; // 从state对象解构persons属性
  // 额外提醒：React state应该保持不可变，建议先创建数组副本再修改
  const updatedPersons = [...persons]; 
  updatedPersons.splice(personIndex, 1); 
  this.setState({ persons: updatedPersons }); 
}

为什么非解构代码能正常运行？ #

你不用解构的代码是：

deletePersonHandler = (personIndex) => { 
  const persons = this.state.persons; 
  persons.splice(personIndex, 1); 
  this.setState({ persons }); 
}

这里const persons = this.state.persons是直接把state里的数组引用赋值给了persons变量，虽然直接修改原数组的做法不符合React state不可变的最佳实践，但至少persons是一个有效的数组，所以splice方法能正常执行，不会触发类型错误。

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