ReactJS ajax响应错误呈现在组件中
ReactJS ajax response errors rendering in component
我想在我的'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>
);
}
});
相关文章:
- AJAX 请求没有在我的 React 组件中设置 this.state.data
- 将AJAX结果作为道具传递给子组件
- 在react组件中使用ajax获取实时更新的数据
- 我可以将 AJAX 调用放在表示组件中,还是应该提取容器
- 检票口 - 使用 AJAX 刷新组件 - 文档元素后的垃圾
- 如何使 ember 组件从服务器获取数据.将 AJAX 调用放在组件中似乎不是处理此问题的好做法
- 反应组件调用了两次(AJAX调用异步)
- ReactJS 从父组件的 onClick 方法更新对子组件的 ajax 调用
- 在自定义 JSF 组件收到 AJAX 的更新后调用自定义 JavaScript 代码
- 如何更新p的标签:在primefaces中ajax调用后,在不关闭组件的情况下选择CheckboxMenu
- jQuery的组件不是彩色动画和ajax
- 使用cfajaxproxy对coldfusion组件进行Ajax调用
- 通过AJAX调用将数据加载到Knockout组件中
- 在Ajax请求后动态附加的HTML中呈现组件
- 如何在$.ajax的回调函数中更改组件视图中的变量
- 如何用ajax优雅地渲染React.js组件
- 尝试在React组件中发出Ajax请求并使用响应
- Ajax请求数据在组件之间传递
- JQuery UI选项卡中的另一个JQuery组件,带有Ajax页面调用
- React + AJAX组件过度渲染