【问题标题】:Reactjs @setState with a dynamic key value具有动态键值的 Reactjs @setState
【发布时间】:2016-03-09 21:25:43
【问题描述】:

我在 props 中有一个动态对象,我想在 state 中发送它

@setState
  key: val
  values:
    another_key: value
    @props.data.option: @props.data.value

但是这种方式行不通,我找到了这个解决方案:

  newState = {}
  newState[@props.data.option] = @props.data.value
  this.setState(newState);

但是这种方式设置了state中right的值

【问题讨论】:

  • 为什么要将通过props 传入的项目存储在state 中?如果props.data.value 是您唯一的事实来源,为什么不在您的render() 函数或您需要此信息的其他任何地方使用它?

标签: javascript reactjs javascript-objects


【解决方案1】:

这里的问题是您正在处理处于状态的嵌套对象,并且当您似乎只想更新 values 对象中的键子集时,整个对象 values 被替换。最好的方法是通过 set 操作使用 React 的不变性助手。 (https://facebook.github.io/react/docs/update.html)。

使用es6,可以设置动态key:

var update = require('react-addons-update');

var newState = update(this.state, {
  values:  {[dynamic_key]: {$set: dynamic_value}}
});

this.setState(newState);

【讨论】:

  • 如果我这样使用:var newState = update(this.state, { values: {[@props.data.option]: {$set: @props.data.value}} }); 我得到这个错误:SyntaxError: [stdin]:200:17: unexpected [
  • 我使用 ECMAScript 2015 (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…) 中的对象初始化器语法。你用来编译你的 react 代码的工具可能不支持这种语法。
  • 我还建议您注意上面 Calvin Belden 提出的问题,因为从道具设置状态通常被认为是不好的做法。
猜你喜欢
  • 2015-05-30
  • 1970-01-01
  • 2017-09-05
  • 2014-02-18
  • 2018-03-28
  • 1970-01-01
  • 2016-05-12
  • 1970-01-01
相关资源
最近更新 更多