扩展运算符，setState - React
扩展运算符，setState - React
提问于 2019-06-23 23:58:50
我有一个这样的验证状态：
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是异步的，但是如何附加深度状态对象的不同值呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 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',
}
};其中第二个最有可能是你的结果，因为它是分配给这个州的最后一个。
Stack Overflow用户
发布于 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
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56725583
复制相关文章
相似问题