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

Question

我想在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？

- Cassidy

Answer 1

搞定了！我需要使用ES6计算属性命名，并简单地编辑assignAttribute：

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

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

- Cassidy

---

不错的发现。我不知道这个ES6特性。看到另一个回答中更笨拙的“旧方法”。 - Thilo

Answer 2

如果你有动态字段名，可以使用[]语法：

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

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

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

- Thilo