Javascript 尽管值已更改，但所有值均为true

我有三个输入字段。一次用于电子邮件、密码和确认密码。如果用户按下按钮，则应执行方法

checkAll（）

，该方法检查字段的默认值是否正确，如果不正确，则应为字段分配另一个类，并且变量应为false。 问题是，如果所有的值都为真，那么应该再次显示默认类，并且

console.log（“一切正常”）。但是，如果我重新加载页面并且没有填充任何内容（所有内容都应设置为false），那么我仍然会在控制台中获得
一切正常
，并且所有变量都设置为true，即使该方法已将值设置为false。为什么呢

SignUp.js

import React, { useState } from "react";
import "./SignUp.css";


function SignUp() {
    const [email, setEmail] = useState(true);
    const [value_email, setValue_email] = useState('')
    const [password, setPassword] = useState('')
    const [passwordLength, setPasswordLenth] = useState(true)
    const [passwordValueEqual, setPasswordValueEqual] = useState('')
    const [passwordEqual, setPasswordEqual] = useState(true)
    const [emailExist, setEmailExist] = useState(false) 


    const checkEmail = async () => {
        // eslint-disable-next-line
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

        if (reg.test(value_email) === false) {
            console.log("E-Mail is wrong");
            setEmail(false);
        }
        else {
            setEmail(true);
        }
    };

    const checkPasswortLength = async () => {
        if(password.length < 5 ) {
            console.log("Passwort zu kurz");
            setPasswordLenth(false);
        }
        else{
            setPasswordLenth(true);
        }
    }

    const checkPasswortEqual = async () => {
        if(passwordValueEqual === password ) {
            setPasswordEqual(true);
            console.log("Passwörter sind gleich");
        }
        else{
            console.log("Passwörter sind ungleich");
            setPasswordEqual(false);     
        }
    }
   
    async function checkAll() {
        await checkEmail();
        await checkPasswortLength();  
        await checkPasswortEqual();
        if(email === true && passwordLength === true && passwordEqual === true ) {
            console.log("Everything ok");
            setEmailExist(true);

            
        }

    }

 




  
    return (
      <div className="SignUp">
        <div className="container" id="container">
            <div className="form-container sign-in-container">
                <form>
                <h2>Registriere dich jetzt</h2>
                <input type="email"  className={email ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" onChange={event => setValue_email(event.target.value)} />
                <p className={email ? 'validation-email-right' : 'validation-email-wrong'}>E-Mail ist falsch</p>
                <input type="password" id="password" className={passwordLength ? 'input-form' : 'input-form-validation-wrong'} placeholder="Passwort" onChange={event => setPassword(event.target.value)} />
                <p className={passwordLength ? 'validation-password-short-right' : 'validation-password-short-wrong'}>Passwort ist zu kurz</p>
                <input type="password" id="password-confirm" className={ passwordEqual ? 'input-form' : 'input-form-validation-wrong'} placeholder="Passwort bestätigen" onChange={event => setPasswordValueEqual(event.target.value)} />
                <p className={passwordEqual ? 'validation-password-equal-right' : 'validation-password-equal-wrong'}>Passwörter stimmen nicht über ein</p>
                {emailExist === true &&
                    <p className='validation-password-equal-wrong'>E-Mail gibt es bereits</p>
                }
                    <div className='buttons-container'>
                        <button className="button-registration" type="button" onClick={checkAll}>Registrieren</button>
                    </div>
                    <a className="already-account" href="/login">Du hast bereits einen Account?</a>
                </form>
            </div>
        <div className="overlay-container">
        <div className="overlay">
            <div className="overlay-panel overlay-right">
            </div>
        </div>
    </div>
</div>
      </div>
    );
  }

export default SignUp;

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
}

h1 {
    font-weight: bold;
    margin: 0;
}

h2 {
    text-align: center;
    font-weight: normal;
    font-size: 18px;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

.buttons-container {
    
    text-align: center;
    display: flex;
    margin-top: 35px;
}

.button-registration {
    display: flex;
    border-radius: 20px;
    border: 1px solid #5869FF;
    background-color: #5869FF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}



button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
}

form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

.input-form {
    background-color: #e6e6e6;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.input-form:focus {
    outline: none;
  box-shadow: 0px 0px 2px #5869FF;

}

.input-form-validation-wrong {
    
    background-color: #e6e6e6;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.input-form-validation-wrong {
    
    background-color: #e6e6e6;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
    box-shadow: 0px 0px 4px #ff5858;
}

.input-form-validation-wrong:focus {
    outline: none;
    box-shadow: 0px 0px 4px #ff5858;
}

.input-form-validation-wrong::placeholder {
  color: #ff5858;

}

.input-remain {

}

.optional-buttons {
    text-align: center;
    display: inline-block;
    font-size: 12px;
}

.already-account {
    color: #5869FF;
    text-decoration: underline;
    font-size: 12px;
    text-align: center;
}

.already-account:hover {
    color: #6a79fc;
    text-decoration: underline;
}

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 40%;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.validation-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-email-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-email-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}

.validation-password-short-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-password-short-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}

.validation-password-equal-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-password-equal-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}



.validation-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}


.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }
    
    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 40%;
    width: 60%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
    background-image: url('../../images/wallpaper.PNG');
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay {
    /*background: -webkit-linear-gradient(to right top, #5869ff, #5c66ff, #6063ff, #6460ff, #685dff, #6d5bff, #715aff, #7658ff, #7c58ff, #8158ff, #8658ff, #8b58ff);*/
    /*background: linear-gradient(to right top, #5869ff, #5c66ff, #6063ff, #6460ff, #685dff, #6d5bff, #715aff, #7658ff, #7c58ff, #8158ff, #8658ff, #8b58ff);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

@media screen and (max-width: 960px) {
    .overlay {
        visibility: hidden;
    }
    .overlay-container {
        visibility: hidden;
    }

    .form-container {
        max-width: 100%;
        min-width: 100%;
    }

    .optional-buttons {
        display: flex;
        align-items: center;
    }
  }

import "./styles.css";
import SignUp from "./SignUp";

export default function App() {
  return (
    <div className="App">
     <SignUp></SignUp>
    </div>
  );
}

App.js

import React, { useState } from "react";
import "./SignUp.css";


function SignUp() {
    const [email, setEmail] = useState(true);
    const [value_email, setValue_email] = useState('')
    const [password, setPassword] = useState('')
    const [passwordLength, setPasswordLenth] = useState(true)
    const [passwordValueEqual, setPasswordValueEqual] = useState('')
    const [passwordEqual, setPasswordEqual] = useState(true)
    const [emailExist, setEmailExist] = useState(false) 


    const checkEmail = async () => {
        // eslint-disable-next-line
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

        if (reg.test(value_email) === false) {
            console.log("E-Mail is wrong");
            setEmail(false);
        }
        else {
            setEmail(true);
        }
    };

    const checkPasswortLength = async () => {
        if(password.length < 5 ) {
            console.log("Passwort zu kurz");
            setPasswordLenth(false);
        }
        else{
            setPasswordLenth(true);
        }
    }

    const checkPasswortEqual = async () => {
        if(passwordValueEqual === password ) {
            setPasswordEqual(true);
            console.log("Passwörter sind gleich");
        }
        else{
            console.log("Passwörter sind ungleich");
            setPasswordEqual(false);     
        }
    }
   
    async function checkAll() {
        await checkEmail();
        await checkPasswortLength();  
        await checkPasswortEqual();
        if(email === true && passwordLength === true && passwordEqual === true ) {
            console.log("Everything ok");
            setEmailExist(true);

            
        }

    }

 




  
    return (
      <div className="SignUp">
        <div className="container" id="container">
            <div className="form-container sign-in-container">
                <form>
                <h2>Registriere dich jetzt</h2>
                <input type="email"  className={email ? 'input-form' : 'input-form-validation-wrong'} placeholder="E-Mail" onChange={event => setValue_email(event.target.value)} />
                <p className={email ? 'validation-email-right' : 'validation-email-wrong'}>E-Mail ist falsch</p>
                <input type="password" id="password" className={passwordLength ? 'input-form' : 'input-form-validation-wrong'} placeholder="Passwort" onChange={event => setPassword(event.target.value)} />
                <p className={passwordLength ? 'validation-password-short-right' : 'validation-password-short-wrong'}>Passwort ist zu kurz</p>
                <input type="password" id="password-confirm" className={ passwordEqual ? 'input-form' : 'input-form-validation-wrong'} placeholder="Passwort bestätigen" onChange={event => setPasswordValueEqual(event.target.value)} />
                <p className={passwordEqual ? 'validation-password-equal-right' : 'validation-password-equal-wrong'}>Passwörter stimmen nicht über ein</p>
                {emailExist === true &&
                    <p className='validation-password-equal-wrong'>E-Mail gibt es bereits</p>
                }
                    <div className='buttons-container'>
                        <button className="button-registration" type="button" onClick={checkAll}>Registrieren</button>
                    </div>
                    <a className="already-account" href="/login">Du hast bereits einen Account?</a>
                </form>
            </div>
        <div className="overlay-container">
        <div className="overlay">
            <div className="overlay-panel overlay-right">
            </div>
        </div>
    </div>
</div>
      </div>
    );
  }

export default SignUp;

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
}

h1 {
    font-weight: bold;
    margin: 0;
}

h2 {
    text-align: center;
    font-weight: normal;
    font-size: 18px;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

.buttons-container {
    
    text-align: center;
    display: flex;
    margin-top: 35px;
}

.button-registration {
    display: flex;
    border-radius: 20px;
    border: 1px solid #5869FF;
    background-color: #5869FF;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}



button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
}

form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

.input-form {
    background-color: #e6e6e6;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.input-form:focus {
    outline: none;
  box-shadow: 0px 0px 2px #5869FF;

}

.input-form-validation-wrong {
    
    background-color: #e6e6e6;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.input-form-validation-wrong {
    
    background-color: #e6e6e6;
    border: none;
    border-radius: 20px;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
    box-shadow: 0px 0px 4px #ff5858;
}

.input-form-validation-wrong:focus {
    outline: none;
    box-shadow: 0px 0px 4px #ff5858;
}

.input-form-validation-wrong::placeholder {
  color: #ff5858;

}

.input-remain {

}

.optional-buttons {
    text-align: center;
    display: inline-block;
    font-size: 12px;
}

.already-account {
    color: #5869FF;
    text-decoration: underline;
    font-size: 12px;
    text-align: center;
}

.already-account:hover {
    color: #6a79fc;
    text-decoration: underline;
}

.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 40%;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.validation-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-email-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-email-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}

.validation-password-short-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-password-short-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}

.validation-password-equal-wrong {
    color: #ff5858;
    margin-top: -2px;
    margin-bottom: -2px;
    text-align: left;
}

.validation-password-equal-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}



.validation-right {
    visibility: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}


.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }
    
    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 40%;
    width: 60%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
    background-image: url('../../images/wallpaper.PNG');
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay {
    /*background: -webkit-linear-gradient(to right top, #5869ff, #5c66ff, #6063ff, #6460ff, #685dff, #6d5bff, #715aff, #7658ff, #7c58ff, #8158ff, #8658ff, #8b58ff);*/
    /*background: linear-gradient(to right top, #5869ff, #5c66ff, #6063ff, #6460ff, #685dff, #6d5bff, #715aff, #7658ff, #7c58ff, #8158ff, #8658ff, #8b58ff);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

@media screen and (max-width: 960px) {
    .overlay {
        visibility: hidden;
    }
    .overlay-container {
        visibility: hidden;
    }

    .form-container {
        max-width: 100%;
        min-width: 100%;
    }

    .optional-buttons {
        display: flex;
        align-items: center;
    }
  }

import "./styles.css";
import SignUp from "./SignUp";

export default function App() {
  return (
    <div className="App">
     <SignUp></SignUp>
    </div>
  );
}

导入“/styles.css”；
从“/SignUp”导入注册；
导出默认函数App（）{
返回(
);
}

---

重新加载页面

第一次按钮点击（黄色标记错误）

第二个按钮，这次没有打印语句，一切正常

---

由于您调用的函数更新了另一个函数的状态，因此同一功能块上的以下代码不会使用更新后的值

您可以做的是在设置时返回更新的值：

    const checkEmail = async () => {
        // eslint-disable-next-line
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

        if (reg.test(value_email) === false) {
            console.log("E-Mail is wrong");
            setEmail(false);
            return false; // add this one -------
        }
        else {
            setEmail(true);
            return true; // add this one --------
        }
    };

^^对其他函数（checkPasswortLength和checkPasswortEqual）也要这样做

然后，在您的checkAll上：

    async function checkAll() {
        const emailCheck = await checkEmail();
        const passwordLengthCheck = await checkPasswortLength();  
        const passwordEqualCheck = await checkPasswortEqual();
        if(emailCheck === true && passwordLengthCheck === true && passwordEqualCheck === true ) {
            console.log("Everything ok");
            setEmailExist(true);
        }
    }

---

更新

我们不能使用setstate回调函数，因为setstate是在另一个函数上调用的，另一种方法是使用

useffect

    useEffect(() => {
        if(email === true && passwordLength === true && passwordEqual === true ) {
            console.log("Everything ok");
            setEmailExist(true);
        }
    }, [])

    async function checkAll() {
        await checkEmail();
        await checkPasswortLength();  
        await checkPasswortEqual();
        // we removed the condition here
    }

---

这样，您就不必“返回”值，每次一切正常时都会自动通知用户。

您的控制台是否持久化？否，控制台也会更改值。仅在单击第二个按钮后。然后这些值不再都是真的，并且不再输出everything OK。我的意思是，在刷新页面后，控制台中的日志可能会被持久化。不，控制台开始时是空的，然后单击按钮后，我会显示一些内容。您是否尝试将默认值设置为

false

而不是

true

？@I am L。。还有别的办法解决这个问题吗？由于它是一个异步函数，显然变量会在以后更新。我们可以在这里使用一些回调逻辑而不是返回true或false吗？@MukulSharma我更新了我的答案并添加了一个替代选项。