动态设置 JSON 值？答案

【问题标题】：Set JSON values dynamically?动态设置 JSON 值？
【发布时间】：2017-03-30 21:04:24
【问题描述】：

我可以这样做吗：

var number = 0;
var values = ["my_component_state_0", "my_component_state_1"];

      this.setState({
          values[number]: evt.target.value
      });

而不是写出来：

      this.setState({
        my_component_state_0: evt.target.value
      });

我需要遍历一些东西，这样的东西会很有用。但它似乎太 hacky，而且它似乎也不起作用 - 或者是吗？（或类似的东西）

【问题讨论】：

你试过了吗 obj[values[index]] = "value"

标签： javascript json reactjs

【解决方案1】：

选项 1：

var number = 0;
var values = ["my_component_state_0", "my_component_state_1"];

var newState = {};
newState[values[number]] = evt.target.value;

this.setState(newState);

选项 2： ECMAScript 2015 中的新符号（计算属性名称） - 但 IE 不支持此语法。

var number = 0;
var values = ["my_component_state_0", "my_component_state_1"];

this.setState({
   [values[number]]: evt.target.value
});

【讨论】：

【解决方案2】：

您可以动态创建对象：

var obj    = {},
    number = 0,
    values = ["my_component_state_0", "my_component_state_1"];

 obj[ values[number] ] = evt.target.value;   // dynamic key creation

使用此原则，您可以遍历任何数组以动态创建任意数量的键，但请确保您要将evt.target.value 分配给所有。

演示

function example(evt) {
  // for demo:
  this.setState = function(obj) { console.log(obj); };

  // object setup
  var state_obj = {},
      number    = 0,
      values    = ["my_component_state_0", "my_component_state_1"];

  // assign the value for a dynamic key
  state_obj[ values[number] ] = evt.target.value;

  // set the state
  this.setState( state_obj );
}


example({
  target: {
    value: 'foo'
  }
});

【讨论】：

【解决方案3】：

我想到的一种方式：

var number = 0;
var values = ["my_component_state_0", "my_component_state_1"];
var state = {};

values.map(function(v, i) {
    state[v] = evt.target.value; // I've added 'test' for the test...
});

this.setState(state);

console.log(state); // { my_component_state_0: 'test', my_component_state_1: 'test' }

【讨论】：