javascript-在React中使用immutability-helper设置变量对象键

我有一个要在React中编写的函数。 在我的课堂上,我有一个状态对象immutability-helper,看起来像这样:

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使用可变键?

2个解决方案
82 votes

弄清楚了! 我需要使用ES6计算的属性名称,只需将assignAttribute编辑为:

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

  this.setState({
    fields: temp
  });
}
Cassidy Williams answered 2020-02-12T22:36:52Z
3 votes

如果您具有动态字段名称,则可以使用[]语法:

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

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

如果可以使用ES6,这将变得更加简洁。

Thilo answered 2020-02-12T22:37:16Z
translate from https://stackoverflow.com:/questions/42404563/using-immutability-helper-in-react-to-set-variable-object-key