javascript - 传播运算符，setState - React

Question

我有这样的验证状态:

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: {email: '', pass: 'Password Invalid'}

如果我在通过检查之前使用return，则电子邮件错误状态正常。我知道 setState 是异步的，但如何附加不同的深度状态对象值？

Answer 1

在您完全创建错误对象之后，只需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',
    }
};

其中第二个最有可能是您的结果，因为它是分配给状态的最后一个。