web-dev-qa-db-fra.com

Utiliser immutability-helper dans React pour définir la clé d'objet variable

J'ai une fonction que je veux écrire dans React. Dans ma classe, j'ai un objet d'état fields qui ressemble à ceci:

this.state = {
  step: 1,
  fields: {
    type: '',
    name: '',
    subtype: '',
    team: '',
    agreement: ''
  }
};

J'ai différentes fonctions qui affectent ces touches à l'aide de immutability helper qui ressemblent généralement à:

assignType(attribute) {
  var temp = update(this.state.fields, {
    type: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

Ce que je voudrais comme, c'est utiliser une fonction plus générique et faire quelque chose comme ceci:

assignAttribute(field, attribute) {
  var temp = update(this.state.fields, {
    field: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}

Mais cela ne fonctionne pas. Que puis-je faire pour utiliser une clé de variable à l'aide de immutability-helper?

javascriptjsonreactjsimmutability
54
Cassidy Williams

Deviner! Je devais utiliser noms de propriétés calculés ES6 et simplement modifier assignAttribute pour:

assignAttribute(field, attribute) {
  var temp = update(this.state.fields, {
    [field]: {$set: attribute}
  });

  this.setState({
    fields: temp
  });
}
11
Cassidy Williams

Vous pouvez utiliser le [] syntaxe si vous avez des noms de champs dynamiques:

var data = {}
data[field] = {$set: attribute}

var temp = update(this.state.fields, data)

Cela devient beaucoup plus concis si vous pouvez utiliser ES6 .

1
Thilo