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

Question

我正在尝试使用 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])
});

}

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

有人可以帮忙吗？

Answer 1

您可以使用计算表达式完成您想要的操作(我不确定您是否已经尝试这样做(。因此，您的appendInput函数应如下所示：

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

Answer 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);

Answer 3

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