TypeError：this.updateUserListは関数ではありません。 reactjs

Question

handleAddUser(){ 
    if(this.checkRequiredField()){ 
     $.ajax({ 
      url:this.state.location, 
      datatype:'text', 
      type:'POST', 
      data:{ 
       UserId:this.state.userId, 
       AccountName:this.state.accountName 
      }, 
      success:function(data,statuc,xhr){ 
       console.log(xhr.getResponseHeader('Location')); 
       console.log('data added successfully');     
      this.updateUserList(xhr.getResponseHeader('Location'));     
      }, 
      error:function(xhr,status,err){ 
       console.error(status, err.toString()); 
      } 
     }); 
    } 
} 

上記の投稿要求では、成功関数にはuserlistを更新するメソッドがあります。

updateUserListメソッドが定義されており、この

this.updateUserList = this.updateUserList.bind(this); 

のようにコンストラクタで言及しているが、この方法を実行していない、代わりに私は、ブラウザのコンソール

TypeError: this.updateUserList is not a functionで以下のエラーが発生しました。

私は別の画面で同様のコードを使用していますが、これは期待どおりです。 この問題を解決するにはどうすればよいですか？

Answer 1

ajax calの成功関数をバインドする必要があります。あなたは外側のスコープが、成功コール

handleAddUser(){ 
    if(this.checkRequiredField()){ 
     $.ajax({ 
      url:this.state.location, 
      datatype:'text', 
      type:'POST', 
      data:{ 
       UserId:this.state.userId, 
       AccountName:this.state.accountName 
      }, 
      success:function(data,statuc,xhr){ 
       console.log(xhr.getResponseHeader('Location')); 
       console.log('data added successfully');     
       this.updateUserList(xhr.getResponseHeader('Location'));     
      }.bind(this), 
      error:function(xhr,status,err){ 
       console.error(status, err.toString()); 
      }.bind(this) 
     }); 
    } 
}