Как динамически установить значение свойства объекта в состоянии ReactionJS?

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

Стандартная практика состоит в том, чтобы скопировать состояние, изменить скопированное состояние, а затем установить состояние с помощью этого клона, например:

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

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}
 })   

Answer 3

Вам необходимо создать копию исходного объекта и изменить только то свойство, которое вы хотите обновить.Самый простой способ сделать это - использовать оператор распространения объекта:

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}}));
};