React - 如何向对象添加动态键/值对？答案

【问题标题】：React - how to add dynamic key/value pair to an object?React - 如何向对象添加动态键/值对？
【发布时间】：2017-04-12 16:53:02
【问题描述】：

我正在尝试使用 appendInput() 函数将动态键/值对添加到初始对象。

初始对象：

constructor(props) {
super(props);
this.state = {
  milestonesValues : {
    milestone0: "dssdsad",
    milestone1: "",
    milestone2: "",
    milestone3: "",
  }
};

}

渲染方法：

render(){
return(
  <div>
    <main className="content">
      <form onSubmit={this.onSubmit}>
        <div className="input-wrap">
          <label>{'What are the basic steps?'}
            {Object.keys(this.state.milestonesValues).map( (milestone, index) =>
              <input
                key={milestone}
                placeholder={`${index+1}.` }
                type="text"
                name={milestone}
                value={this.state.milestonesValues[milestone]}
                onChange={this.handleInputChange} />
              )}
          </label>
          <button onClick={ () => this.appendInput() }>
            {"+ ADD MILESTONE"}
          </button>
        </div>
       </form>
     </main>
   </div>
);

appendInput() 函数：

  appendInput() {
var objectSize = Object.keys(this.state.milestonesValues).length;
var newInput = `milestone${objectSize}: "",`;

console.log(newInput);
this.setState({
  milestonesValues: this.state.milestonesValues.concat([newInput])
});

}

我只是无法将新生成的键/值添加到该初始对象。

有人可以帮忙吗？

【问题讨论】：

标签： javascript reactjs object

【解决方案1】：

您可以使用computed expression 完成您想要的操作（我不确定您是否已经尝试这样做）。所以你的appendInput 函数应该是这样的：

appendInput() {
  var objectSize = Object.keys(this.state.milestonesValues).length;
  var newInput = Object.assign({}, 
this.state.milestonesValues, {['milestone'+ objectSize]: ''});
  this.setState({
    milestonesValues: newInput)
  });
}

【讨论】：

【解决方案2】：

使用这个：

appendInput() {
    var milestonesValues = Object.assign({}, this.state.milestonesValues);

    var objectSize = Object.keys(milestonesValues).length;
    var newInput = `milestone${objectSize}`;

    milestonesValues[newInput] = '';

    this.setState({ milestonesValues });
}

检查这个例子：

let data = {
  milestonesValues : {
    milestone0: "dssdsad",
    milestone1: "",
    milestone2: "",
    milestone3: "",
  }
};

function addelement(){
   var milestonesValues = Object.assign({}, data.milestonesValues);

    var objectSize = Object.keys(milestonesValues).length;
    var newInput = `milestone${objectSize}`;

    milestonesValues[newInput] = '';

    data.milestonesValues = milestonesValues;
}

addelement();

console.log(data.milestonesValues);

【讨论】：

【解决方案3】：

var newInput = Object.assign({},
this.state.products.map(function(addNewfield){ addNewfield[val]= '' }));
this.setState({ products: newInput })

【讨论】：

虽然此代码可能会回答问题，但会添加一些解释，说明为什么以及如何提高答案的质量