React.js setState() 与循环内的键变量？

Question

有没有办法使用字符串变量的值作为 setState() 的键？

getInitialState: function () {
    return {
        foo: '',
        bar: ''
    }
}

someOtherHandler: function() {
    var arr = ['foo', 'bar'];
    var _this = this;
    var number = Math.random();

    for (var i in arr) {
        _this.setState({ arr[i]: number });
    }

}

React 会抛出上述语法错误，并且将 arr[i] 设置为变量最终会使用该变量的名称设置新状态。

Answer 1

您可以在调用setState之前创建对象。

var newState = {};
newState[i] = number;
_this.setState(newState);

或者，如果您使用的是 ES6，您可以使用 computed property。

_this.setState({ [i]: number });

不过，这段代码会多次调用setState，但只调用一次效率更高。构建更新后的状态对象，然后应用它。

var newState = {};

for(var i in arr) {
  newState[i] = number;
}

this.setState(newState);