ajax呼び出し後にreactjs状態を更新する

Question

ajax呼び出しからエラーが発生したときに状態を更新したい。

マイコード：

var EmailForm = React.createClass({ 

    getInitialState: function(){ 
     return { 
      password:'', 
      email: '', 
      errors: '' 
     }; 
    }, 

    componentDidMount: function() { 
     this.serverRequest = $.get('/accounts/email-form/', function (result) { 
      var userInfo = result; 
      this.setState({ 
      email: userInfo.email 
      }); 
     }.bind(this)); 
    }, 

    submit: function (e){ 
     var self; 

     e.preventDefault() 
     self = this; 

     console.log(this.state); 

     var data = { 
     password: this.state.password, 
     email: this.state.email, 
     CSRF: csrftoken 
     }; 

     // Submit form via jQuery/AJAX 
     function csrfSafeMethod(method) { 
      // these HTTP methods do not require CSRF protection 
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 
     } 
     $.ajaxSetup({ 
      beforeSend: function(xhr, settings) { 
       if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
        xhr.setRequestHeader("X-CSRFToken", csrftoken); 
       } 
      } 
     }); 
     $.ajax({ 
     type: 'POST', 
     url: '/accounts/email-form/', 
     data: data, 
     datatype: JSON 
     }) 
     .done(function(data) { 
     toastr.success('Profile updated'); 
     }) 
     .error(function(jqXhr) { 
      var error = jqXhr.responseJSON; //How can I append this errors to my errors state ? 
      toastr.error('There is some errors in your request'); 
     }); 
    }, 

    passwordChange: function(e){ 
     this.setState({password: e.target.value}); 
    }, 

    emailChange: function(e){ 
    this.setState({email: e.target.value}); 
    }, 

    render: function() { 
     return (
      <form onSubmit={this.submit}> 
       <div className="form-half"> 
        <label htmlFor="password" className="input-label">Current Password</label> 
        <BasicInputPassword valChange={this.passwordChange} val={this.state.password}/> 
        <span className="form-error is-visible">{this.state.errors.password}</span> 
       </div> 
       <div className="form-half"> 
        <label htmlFor="email" className="input-label">New email</label> 
        <BasicInput valChange={this.emailChange} val={this.state.email}/> 
        <span className="form-error is-visible">{this.state.errors.email}</span> 
       </div> 
       <button type="submit" className="button secondary" >Submit</button> 
      </form> 
     ); 
    } 
}); 

私は、エラー変数における応答エラーを持っています。このjsonで状態エラーを更新し、state.errors.emailなどの表示を簡単にするにはどうすればよいですか？これは可能ですか？

Answer 1

使用this.setState()

var that = this; 
$.ajax({ 
     type: 'POST', 
     url: '/accounts/email-form/', 
     data: data, 
     datatype: JSON 
     }) 
     .done(function(data) { 
     toastr.success('Profile updated'); 
     }) 
     .fail(function(xhr, status, error) { 
      that.setState({ 
      //assign error to whatever you want under `state` 
      }); 
     }); 

* thisが右範囲を指していることを確認してください。または、語彙thisにはarrow functionsを使用してください。

Answer 2

$.get('some.php') 
    .done(function(msg){ }) 
    .fail(function(xhr, status, error) { 
     this.setState({});///here <=== 
    }).bind(this); 

または

$.ajax({ 
     type: "GET", 
     url: "test.com", 
     success: function(msg){ 
      alert("Data Saved: " + msg); 
     }, 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
     alert("some error"); 
     } 
    }); 

あなたは.fail()を使用する必要があります。また、.fail()にerrorにアクセスした状態で保存することができます。

Answer 3

これは可能です。

const self = this; 
$.get('api-url') 
.done(function(msg){ 
    // some work 
}) 
.fail(function(xhr, status, error) { 
    self.setState({error: xhr.responseJSON }); 
}); 

このコンテキストが変更されるので、最初に変数に割り当ててコンテキストとの混同を避けることができます。