「警告：未定義（...）：既存の状態遷移中に更新できません...」というエラーが表示されるのはなぜですか？

Question

はので、私はこのように私のコードでこれを持っている：

class TimersDashboard extends React.Component{ 
    constructor() { 
     super(props); 
     this.state = { 
     timers: [ 
     {id: uuid.v4(), text:'I am the first id' }, 
     { id:uuid.v4(), text:'I am the second text' } 
     ] 
     }; 
    } 
     clickEdit(id) { 
      this.openForm(id); 
     } 

     openForm(id) { 
      this.setState({ 
       timers: this.state.timers.map((timer) => { 
        if(timer.id === id) { 
         return Object.assign({}, timer, { editFormOpen: true }); 
        } else { 
         return timer; 
        } 
       }) 
      }); 
     } 

     handleCloseForm(id) { 
      this.closeForm(id); 
     } 

     closeForm(id) { 
      this.setState({ 
       timers: this.state.timers.map((timer) => { 
        if(timer.id === id) { 
         return Object.assign({}, timer, { editFormOpen: false }); 
        } else { 
         return timer; 
        } 
       }) 
      }); 
     } 

    } 
render() { 
return (
    <Timer id={this.state.data[0].id} onEdit={this.clickEdit.bind(this)} onDelete = {this.handleCloseForm.bind(this)}/> // as if wroking on the first id 
); 
} 
} 
} 

しかし、以下、私はあなたは自分のコードが少し似て見ることができ、小道具などの方法、私はこれらの同じ方法を起動しようとした他の構成要素を通過しました途中で私は、他のコンポーネントに同じようにそれらをコーディング

class Timer extends React.Component { 

    constructor(props) { 
     super(props); 
     this.handleEditClick = this.handleEditClick.bind(this); 
     this.handleTrashClic = handleTrashClic.bind(this); 
    } 
    handleEditClick() { 
     this.props.onDelete(this.props.id); 
    } 
    handleTrashClick() { 
     this.props.onEdit(this.props.id); 
    } 
render() { 
return(
    // ... onClick = {()=>this.handleEditClick(this.props.id)} .. 
    // ... onClick = {()=>this.handleTrashClick(this.props.id)} .. 
); 
} 
} 
} 

は、削除の方法は、他のコンポーネントに動作しますが、編集方法はないと私はそれを動作させることができない理由を私は知らない、私はparentObjを渡そうとしました文脈、追加.bind（これ）、しかし、私はそれを動作させることはできません。私のエラーは「警告：未定義（...）：既存の状態遷移中に更新できません...」です。私はそれをどのように機能させるのですか？

Answer 1

jsfiddleの同じ例を作成しました。ワーキング例えば

class Timer extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state={}; 
    } 

    edit(id){ 
     this.props.edit(id); 
    } 

    remove(id){ 
     this.props.remove(id); 
    } 

    render(){ 
     return(
      <div> 
       In Child Component: 
       <br/> 
       Id: {this.props.id} 
       <p onClick={this.edit.bind(this,this.props.id)}>Edit</p> 
       <p onClick={this.remove.bind(this,this.props.id)}>Remove</p> 
       *click on edit and remove to change the state 
      </div> 
     ) 
    } 
} 

チェックjsfiddle：

親コンポーネント：

class TimersDashboard extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      timers: [ 
       {id: 1, text:'I am the first text' }, 
       {id: 2, text:'I am the second text' } 
      ]   
     }; 
    } 

    edit(id){ 
     let timers = this.state.timers.map((timer) => { 
      if(timer.id === id) { 
       return Object.assign({}, timer, { editFormOpen: true }); 
      } else { 
       return timer; 
      } 
     }) 
     this.setState({timers}); 
    } 

    remove(id){ 
     let timers = this.state.timers.map((timer) => { 
      if(timer.id === id) { 
       return Object.assign({}, timer, { editFormOpen: false }); 
      } else { 
       return timer; 
      } 
     }) 
     this.setState({timers}); 
    } 

    render() { 
     return (
      <div> 
       <Timer id={1} edit={this.edit.bind(this)} remove={this.remove.bind(this)}/> 
      </div> 
     ); 
    } 
} 

子コンポーネントにこれを試してみてくださいhttps://jsfiddle.net/wqkfqusk/