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

IT技术 javascript reactjs ecmascript-6
2021-05-08 08:09:05

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时,它正在尝试更新未设置的内容。

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 转译器支持它们,或者您可以使用Babel代替(因为react-tools 已被弃用而支持 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})
}