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

标准做法是复制状态，修改复制的状态，然后使用该克隆设置状态，如下所示：

//with spread operator
const enabledClone = {...this.state.enabled};
enabledClone.one = true;
this.setState({enabled : enabledClone});

Answer 3

您可以在对象的键周围使用花括号来使用变量来确定键

const dynamicKey = 'one';
const newObj = {[dynamicKey]: true} //equals {one: true}

由于this.setState仅在顶级键上合并，因此您将必须创建当前已启用对象的副本并使用大括号表示法：

 let dynamicProperty = "one"
 this.setState({
   enabled: {...this.state.enabled, [dynamicProperty]: true}
 })