阵列不变性更新助手中的动态密钥

小编典典

阵列不变性更新助手中的动态密钥

reactjs

https://facebook.github.io/react/docs/update.html

我有一个更新函数，该函数可以接收索引以及事件，以便更改数组中该特定项目的值。

index在这种情况下，如何进行评估而不是将其视为固定密钥？可能吗

updateValue: function(index, e) {
  var items = React.addons.update(this.state.items, {
   index: {
     amount: {$set: e.target.value}
   }
  });
  this.setState({
    items: items
  })
}

现在这显然不起作用，因为this.state.items['index']['amount']当我想修改this.state.items[1]['amount']索引为1
时，它正在尝试更新未设置的内容。

阅读 213

2020-07-22

共1个答案

小编典典

您可以使用ES6计算的属性名称，该名称与index变量类似：

updateValue(index, e) {
  var items = React.addons.update(this.state.items, {
    [index]: {
      amount: {$set: e.target.value}
    }
  })
  this.setState({items})
}

根据此ES6兼容性表，当启用其Harmony转换时，React的JSX
Transpiler支持它们，或者您可以使用Babel（因为无论如何，为了支持Babel而弃用react-
tools）。

失败的话，您可以使用辅助函数来创建具有给定命名属性的对象：

function makeProp(prop, value) {
  var obj = {}
  obj[prop] = value
  return obj
}

// ...

updateValue: function(index, e) {
  var items = React.addons.update(this.state.items, makeProp(
    index, {
      amount: {$set: e.target.value}
    }
  ))
  this.setState({items: items})
}

2020-07-22