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

Question

我有一个函数想用 React 写。在我的 class 中，我有一个状态对象 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 来使用可变键？

Answer 1

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

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

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

Answer 2

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

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

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

这得到。

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

Using immutability-helper in React to set variable object key

javascript

json

immutability

reactjs