如何在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}

 })