我有一个这样的验证状态:
this.state = {
email: '', pass: '',
errors: {
email: '', pass: ''
}
}
当用户按下一个按钮时,它会像这样验证表单:
onSubmit = (e) => {
e.preventDefault();
this.setState({errors: {pass: '', email: ''}});
const pass = this.state.pass.trim();
if(!isEmail(this.state.email)){
this.setState({errors: {...this.state.errors, email: 'Invalid Email.'}});
}
// return; - in this way email state error will be ok
if(pass.length < 6){
this.setState({errors:{ ...this.state.errors, pass: 'Password Invalid'}});
}
return console.log(this.state);
};
我使用...
运算符在errors对象中附加错误类型。问题是,如果电子邮件无效,并且密码有错误,则状态如下:
errors: {email: '', pass: 'Password Invalid'}
如果我在通过检查之前使用return
,电子邮件错误状态工作正常。我知道setState
是异步的,但是如何附加深度状态对象的不同值呢?
发布于 2019-06-24 00:04:26
在完全创建了errors对象之后,只需执行setState
。您设置状态的次数超过了需要设置的次数。只有在知道所有错误是什么之后,您才真正有兴趣在此函数中设置状态。
onSubmit = (e) => {
e.preventDefault();
const pass = this.state.pass.trim();
let errors = { pass: '', email: '' };
if (!isEmail(this.state.email)) {
errors.email = 'Invalid Email.';
}
if (pass.length < 6) {
errors.pass = 'Password Invalid';
}
this.setState({ errors });
}
这里使用...
运算符不是问题所在。可能发生的情况是,React将您的更新捆绑在一起,因此每个更新都处于相同的状态。所以如果你有这样的状态
{
error: {
email: '',
pass: '',
}
}
并且你有两个批量的更新
setState({errors: {...this.state.errors, email: 'Invalid Email.'}});
setState({errors:{ ...this.state.errors, pass: 'Password Invalid'}});
它们将看到相同的状态,并相应地进行更新,以生成以下两个状态更新
this.state = {
error: {
email: 'Invalid Email',
pass: '',
}
};
this.state = {
error: {
email: '',
pass: 'Password Invalid',
}
};
其中第二个最有可能是你的结果,因为它是分配给这个州的最后一个。
发布于 2019-06-24 00:20:42
使用state函数可以做到这一点:
this.setState(prevState => {
const errors = {};
if(!isEmail(prevState.email)){
errors.email = 'Invalid Email.';
}
if(prevState.pass.trim().length < 6) {
errors.pass = 'Password Invalid'
}
return {errors: {...prevState.errors, ...errors}}; // combine your new errors with another keys errors if exists
});
https://stackoverflow.com/questions/56725583
复制相似问题