为什么没有[]的对象键将不是可接受的参数？

Question

代码是组件状态的常规切换处理程序。我似乎无法弄清楚为什么第一组代码创建新的键名属性，而第二组代码使用接受的参数。

 controlToggle = (property) => {
    this.setState({property: !this.state.property})
  }

 controlToggle = (property) => {
    this.setState({[property]: !this.state.property})
  }

Answer 1

我认为这是因为在JavaScript中，对于像{XXX: YYY}这样的键值对，它将自动将第一个XXX视为值的键/属性名称，因此您必须将[]括号添加到“转义”该模式，以使用变量的值作为键，而不是本质上将其视为字符串。

更具体地说，[]括号内的内容将被视为普通的JavaScript代码，并被视为“ calculated”

Answer 2

在设置或获取动态对象密钥时，您使用[]。如果您未在[]中提供密钥，它将使用变量名作为对象（在您的情况下为property

中）的密钥

例如

controlToggle = (property) => {
    this.setState({property: !this.state.property})
}

上面的代码将键的状态设置为property

正确的方法是

controlToggle = (property) => {
    this.setState({[property]: !this.state[property]})
}