如何在reactJS状态下动态设置对象属性的值？

Question

假设一个组件具有如下状态：

this.state = {

  enabled: {

    one: false,

    two: false,

    three: false

  }

}

如何this.setState()用于设置动态属性的值？

例如，这不起作用：

let dynamicProperty = "one"

this.setState({

  enabled[dynamicProperty]: true

})

但是，这确实有效，但也是不好的做法：

this.enabled = {

  one: false,

  two: false,

  three: false

}

let dynamicProperty = "one"

this.enabled[dynamicProperty] = true;

如何this.setState()用它来完成同样的事情？

Answer 1

您需要创建原始对象的副本，并且只更改要更新的属性。最简单的方法是使用对象扩展运算符：this.setState(currentState => ({enabled: {...currentState.enabled, one: true}}));或更详细的形式：this.setState(currentState => {    const enabled = {...currentState.enabled, one: true};    return {enabled};});如果属性名称仅在运行时已知，您可以这样做：const setEnabled = name => {    this.setState(currentState => ({enabled: {...currentState.enabled, [name]: true}}));};

Answer 2

您可以在对象的键周围使用大括号来使用变量来确定键const dynamicKey = 'one';const newObj = {[dynamicKey]: true} //equals {one: true}由于 this.setState 仅在顶级键上合并，因此您必须创建当前启用对象的副本并使用大括号表示法： let dynamicProperty = "one" this.setState({   enabled: {...this.state.enabled, [dynamicProperty]: true} })