Javascript 组件中呈现的ReactJS ajax响应错误

我想在“FormError”组件中的ajax调用之后呈现json响应错误

我的错误组件如下所示：

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

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

---

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

为什么不设置一个错误状态

可以这样说：

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

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

var EmailForm=React.createClass({
建造师（道具）{
this.onError=this.onError.bind（this）；
}
getInitialState:函数（）{
返回{
密码：“”，
电子邮件：“”
};
},
componentDidMount:function（）{
this.serverRequest=$.get（'/accounts/email form/'，函数（结果）{
var userInfo=结果；
这是我的国家({
电子邮件：userInfo.email
});
}.约束（这个）；
},
提交：职能（e）{
var-self；
e、 预防默认值（）
self=这个；
console.log（this.state）；
风险值数据={
密码：this.state.password，
电子邮件：this.state.email，
CSRF:csrftoken
};
//通过jQuery/AJAX提交表单
函数csrfSafeMethod（方法）{
//这些HTTP方法不需要CSRF保护
返回（/^（获取|头|选项|跟踪）$/.test（方法））；
}
$.ajaxSetup({
发送前：功能（xhr、设置）{
如果（！csrfSafeMethod（settings.type）&&！this.crossDomain）{
setRequestHeader（“X-CSRFToken”，CSRFToken）；
}
}
});
$.ajax({
键入：“POST”，
url:“/accounts/email form/”，
数据：数据
})
.完成（功能（数据）{
toastr.success（“更新档案”）；
})
.失败（功能（jqXhr）{
自报错误（jqXhr.response）；
toastr.error（'您的请求中有一些错误'）；
});
},
onError：功能（响应）{
这是我的国家({
passwordError:response.password，
emailError:response.email
})
}
密码更改：函数（e）{
this.setState（{密码：e.target.value}）；
},
emailChange:功能（e）{
this.setState（{email:e.target.value}）；
},
render:function（）{
const{emailError，passwordError}=this.state；
返回(
当前密码
{emailError&}
新电子邮件
{passwordError&&}
提交
);
}
});

---

这有点简化了。

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

---

嗯，我不这么认为，我很了解你。我创建了状态错误，但是如何将状态变量更新为ajax调用错误？检查来自服务器的响应，如果它包含错误，则调用

setState

来更新组件的状态。你已经在用电子邮件做同样的事情了

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