オブジェクトを状態オブジェクトの配列にプッシュします。 ReactJS

Question

私はコードから始めましょう：

class App extends React.Component{ 
    constructor() { 
     super(); 
     this.state = { 
      todo: [] 
     }; 
    } 

    addTask(newTask) { 
     let todo = this.state.todo.slice(); 
     newTask.id = this.nextId(); 
     todo.push(newTask); 
     this.setState({todo}); //React method to update state object 
    } 

    //fake id 
    nextId() { 
     let id = 0; 
     this.nextId =() => { 
      return ++id; 
     }; 

     return id; 
    } 

    render() { 
     return (
      <div> 
       <ToDoList list={this.state.todo} /> 
       <ModalDialog onFormSubmission={this.addTask.bind(this)}/> 
       <ActionButton /> 
      </div> 
      ); 
    } 

} 
; 

は、今私はaddTask(newTask)の各呼び出し後にすることを期待している - this.state.todo配列は、ユニークなidに別の要素が取り込まれます。だから、例えば：

addTask({title: "aa", description: "bb"}); 
addTask({title: "aa", description: "bb"}); 

は私を与える必要があります。

this.state.todo[0].id === 0 
this.state.todo[1].id === 1 

をしかし、私は同じ値ちょうど上記のように、これは真実であるとの二つのオブジェクトを置くとき：

this.state.todo[0].id === 1 
this.state.todo[1].id === 1 

私は理由を見ることができません。ユニークな値でオブジェクトをプッシュすると機能します。

Answer 1

私は、問題を見つけた：

class ToDoForm extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      title: '', 
      description: '' 
     }; 
    } 

    handleSubmit(event) { 
     this.props.onFormSubmission(this.state); //on form submission is `addTask` in this context 
     event.preventDefault(); 
    }  

    handleChange() { 
     this.setState({ 
      title: this.refs.title.value, 
      description: this.refs.description.value 
     }); 
    } 

} 

補正：

handleSubmit(event) { 
    event.preventDefault(); 
    let {title, description} = this.state; 
    this.props.onFormSubmission({title, description}); 
} 

私は可変オブジェクトを渡しました。私は気が気になりません:)