React-如何将动态键/值对添加到对象？

Question

I am trying to add dynamic key/value pair to an initial object with the appendInput() function.

Initial object:

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

}

The render method:

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() function:

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

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

}

and I just can't add the new generated key/value to that initial object.

Can someone help, please?

Answer 1

You can accomplish what you want using computed expression (I'm not really sure if you are trying to do that already). So your appendInput function should look something like this:

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

Answer 2

Use this:

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

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

    milestonesValues[newInput] = '';

    this.setState({ milestonesValues });
}

Check this example:

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