Reactjs 数组的不变性更新助手中的动态键

发布于06月18日

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的索引时.

推荐答案

您可以使用ES6 computed property names，与index变量类似:

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

根据这ES6 compatability table条，React的JSX transpiler在启用和声变换时支持它们，或者您可以使用Babel代替它们(反正是react-tools is being deprecated in favour of Babel).

否则，可以使用助手函数创建具有给定命名属性的对象:

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})
}