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

【问题标题】：Using immutability-helper in React to set variable object key在 React 中使用 immutability-helper 设置变量对象键
【发布时间】：2017-07-13 06:34:39
【问题描述】：

我有一个想用 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 使用变量键？

【问题讨论】：

标签： javascript json reactjs immutability

【解决方案1】：

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

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

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

这会得到a lot more concise if you can use ES6。

【讨论】：

【解决方案2】：

想通了！我需要使用ES6 computed property names 并简单地将assignAttribute 编辑为：

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

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

【讨论】：

不错的发现。不知道这个 ES6 特性。有关更笨拙的“旧方式”，请参阅其他答案。