ReactJS ajax响应错误呈现在组件中

ReactJS ajax response errors rendering in component

本文关键字:组件 ajax 响应 错误 ReactJS      更新时间:2023-09-26

我想在我的'FormError'组件中ajax调用后呈现json响应错误。

我的错误组件是这样的:

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

我的形式:

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>
        );
    }
});

这个代码工作,ajax调用给我响应json与错误

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

但是我不知道如何将这个错误附加到我的代码和我的react组件。

为错误设置一个单独的状态变量,每次json响应包含错误时,更新该变量。然后,例如,您可以使用以下条件向用户显示详细信息(如果没有错误,则将错误作为空数组):

{this.state.errors.length != 0 && ... // traverse them and show details

为什么不直接设置一个错误状态呢?

可以这样写:

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>
    );
}
});