Реакция обновления значения состояния в неправильном месте

Question

Я пытаюсь реализовать простую проверку формы в React, где длина имени должна быть больше 1 символа, длина страны должна быть более 2 символов вместе с паролем. Тем не менее, пароль и страна проверяются правильно. Но поле имени не проверяется должным образом. Во-первых, он позволяет передавать имя, если оно длиной всего 1 символ, и вместо этого показывает ошибку в теге span страны. Кроме того, я не уверен, как реализовать logi c для проверки электронной почты. Вот мой код:

import React, { Component } from "react";


export default class SignUp extends Component {
    constructor(){
        super();
        this.state={
            name:'',
            country:'',
            email:'',
            pass:'',
            formErrors:{
                nameError:'',
                countryError:'',
                emailError:'',
                passwordError:''
            }
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleValidate=this.handleValidate.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    handleChange =(e) =>{
        let name=e.target.name;
        let value=e.target.value;
        this.setState({
            [name]:value
        })
    }

    handleValidate= () =>{
        let { name,country,email,pass} =this.state;
        let nameError, countryError, emailError, passError;

        if(!name)
            nameError="Missing name"
        if(name && name.length<2)
            countryError="Length of name should be more than 1 character"

        if(!country)
            countryError="Missing country"
        if(country && country.length<3)
            countryError="Length of country should be more than 2 characters"

       /* if(!email)
            emailError="Email can't be empty"
        let lastAtPosi=email.lastIndexOf('@');
        let lastDotPosi=email.lastIndexOf('.');
        console.log("last @ posti"+lastAtPosi);
        console.log("Last . posi"+lastDotPosi);
        */

        if(!pass)
            passError="Password can't be empty"
        if(pass && pass.length<6)
            passError="Password must be more than 6 characters long"

        this.setState({
            formErrors:{
                nameError:nameError,
                countryError:countryError,
               // emailError:emailError,
                passwordError:passError
            }
        })
        console.log("name "+nameError);
    }

    handleSubmit= (e) =>{
        e.preventDefault();
       this.handleValidate();
    }

    render() {
        const { name, country, email, pass, formErrors } = this.state;
        return (
            <div>

            <form>
                <h3>Sign Up</h3>
                <div className="form-group">
                    <label>Name</label>
                    <input type="text" onChange={this.handleChange}name="name"value={name} className="form-control" placeholder="Enter name" />
                    {formErrors.nameError? <span variant="danger">{formErrors.nameError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Country</label>
                    <input type="text" onChange={this.handleChange}name="country"value={country} className="form-control" placeholder="Enter country" />
                   {formErrors.countryError? <span variant="danger">{formErrors.countryError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" onChange={this.handleChange}name="email"value={email} className="form-control" placeholder="Enter email" />
                    {formErrors.emailError?<span variant="danger">{formErrors.emailError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" onChange={this.handleChange}name="pass" value={pass} className="form-control" placeholder="Enter password" />
                    {formErrors.passwordError?<span variant="danger">{formErrors.passwordError}</span>:'valid'}
                </div>

                <button onClick={this.handleSubmit}type="submit" className="btn btn-primary btn-block">Sign Up</button>

            </form>
            </div>
        );
    }
}

Ссылка в песочнице введите описание ссылки здесь

Answer 1

В вашем handleValidate вы назначаете ошибку неправильной переменной ошибки:

if(name && name.length<2)
            countryError="Length of name should be more than 1 character"

Это должно быть:

if(name && name.length<2)
            nameError="Length of name should be more than 1 character"