React表单使用State和Ref验证失效问题求助

• React的setState是异步更新状态的，在handleSubmit中多次调用setError后，立即访问error变量拿到的还是更新前的旧值。所以哪怕验证出了错误，error.length == 0的判断依然为真，导致表单提交逻辑被触发。
• 你当前通过setError(prevState => [...prevState, ...])的方式追加错误，但因为状态更新的异步性，这些更新不会同步反映到当前函数执行栈中的error变量上。

修改handleSubmit函数，用一个临时变量收集所有验证错误，最后统一更新error状态，再根据临时变量的长度判断是否提交表单：

const handleSubmit = (event) => {
    event.preventDefault();
    event.stopPropagation();

    // 用临时变量收集所有错误
    const newErrors = [];

    // 1. 验证条款勾选状态
    if (!terms.current.checked) {
        newErrors.push({
            'uuid': 'Client error',
            'message': 'Debes de aceptar los Terminos y condiciones!'
        });
    }

    // 2. 处理其他输入项
    const formElements = event.target.elements;
    const body = {
        name: formElements.name.value,
        lastName: formElements.lastName.value,
        email: formElements.email.value,
        password: formElements.password.value,
        passwordRepeated: formElements.passwordRepeated.value,
    };

    // 验证空值
    if (Object.values(body).some(value => value.length === 0)) {
        newErrors.push({
            'uuid': 'Client error',
            'message': 'No pueden haber valores vacios'
        });
    }

    // 验证邮箱格式
    if (!isEmailCorrect(body.email)) {
        newErrors.push({
            'uuid': 'Client error',
            'message': 'El email tiene formato incorrecto'
        });
    }

    // 验证密码一致性
    if (body.password !== body.passwordRepeated) {
        newErrors.push({
            'uuid': 'Client error',
            'message': 'Las contraseñas no coinciden'
        });
    }

    // 统一更新错误状态
    setError(newErrors);

    // 根据临时错误数组判断是否提交
    if (newErrors.length === 0) {
        registerUser(body);
    }
};

• 替换原有的formValues索引取值方式，通过event.target.elements结合input的name属性获取值，避免表单结构变动导致的取值错误。
• 密码输入框建议使用type="password"替代text，提升用户体验和安全性。

内容的提问来源于stack exchange，提问作者Sergio Paniagua López