Question

我可以这样做：

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，它似乎也没有用 - 或者它是吗？（或类似的东西）

Answer 1

您可以动态创建对象：

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

Answer 2

选项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
});

Answer 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' }

动态设置JSON值？

3 个答案:

演示