web-dev-qa-db-ja.com

Reactで不変ヘルパーを使用して変数オブジェクトキーを設定する

Reactで書きたい機能があります。私のクラスには、次のような状態オブジェクトfieldsがあります。

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

immutability helperを使用してこれらのキーを割り当てるさまざまな関数があります。

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

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

のようにすることは、より一般的な関数を使用して次のようなことをすることです：

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

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

しかし、これは機能しません。 immutability-helperを使用して変数キーを使用するにはどうすればよいですか？

javascriptjsonreactjsimmutability
54
Cassidy Williams

理解した！ ES6計算されたプロパティ名 を使用し、assignAttributeを次のように編集する必要がありました。

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

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

[]動的フィールド名がある場合の構文：

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

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

これは ES6を使用できる場合はさらに簡潔になります になります。

1
Thilo