ReactJS Ajax Antwort Fehler Rendering in Komponente

Question

Ich möchte meine JSON Antwort Fehler nach Ajax Aufruf in meiner 'FormError' Komponente.

Meine Fehlerkomponente sieht wie folgt aus:

var FormError = React.createClass({ 
    render: function() { 
     return (
      <span className="form-error"></span> 
     ); 
    } 
}); 

Meine Form:

var EmailForm = React.createClass({ 
    getInitialState: function(){ 
     return { 
      password:'', 
      email: '' 
     }; 
    }, 

    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 
     }) 
     .done(function(data) { 
     toastr.success('Profile updated'); 
     }) 
     .fail(function(jqXhr) { 
     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}/> 
        <FormError/> 
       </div> 
       <div className="form-half"> 
        <label htmlFor="lastname" className="input-label">New email</label> 
        <BasicInput valChange={this.emailChange} val={this.state.email}/> 
        <FormError/> 
       </div> 
       <button type="submit" className="button secondary" >Submit</button> 
      </form> 
     ); 
    } 
}); 

Dieser Code funktioniert, Ajax-Aufruf geben Sie mir Antwort json mit Fehlern

{"email":["Email already exists."],"password":["This field may not be blank."]} 

aber ich haven 't Idee, wie kann ich diese Fehler an meinen Code und meine reagierende Komponente anhängen.

Answer 1

Haben Sie einen separaten Zustandsvariablen für Fehler und jedes Mal, wenn die Json Antwort Fehler enthält, aktualisieren Sie die Variable. Dann könnten Sie zum Beispiel die Details für Benutzer anzeigen, die diese Bedingung verwenden (Fehler als leeres Array, wenn keine Fehler vorliegen):

Answer 2

Warum nicht einfach einen Fehlerzustand setzen ?!

Könnte so etwas wie dieses:

var EmailForm = React.createClass({ 
constructor(props) { 
    this.onError = this.onError.bind(this); 
} 

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

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 
    }) 
    .done(function(data) { 
    toastr.success('Profile updated'); 
    }) 
    .fail(function(jqXhr) { 
    self.onError(jqXhr.response); 
    toastr.error('There is some errors in your request'); 
    }); 

}, 

onError: function(response) { 
    this.setState({ 
    passwordError: response.password, 
    emailError: response.email 
    }) 
} 

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

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

render: function() { 
    const {emailError, passwordError} = this.state; 

    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}/> 
       {emailError && <FormError error={emailError}/>} 
      </div> 
      <div className="form-half"> 
       <label htmlFor="lastname" className="input-label">New email</label> 
       <BasicInput valChange={this.emailChange} val={this.state.email}/> 
       {passwordError && <FormError error={passwordError}/>} 
      </div> 
      <button type="submit" className="button secondary" >Submit</button> 
     </form> 
    ); 
} 
}); 

Es ist ein bisschen vereinfacht ..