trigger the use of useeffect when submitting form

Question

I am very familar on the use of useEffect. Mycode is below:

const Login=(props)=>  {
    const [password,setPassword]=useState(null);
    const [readytosubmit,setReadytosubmit]=useState(false)

    const nameRef=useRef("dim");
    var name=nameRef.current.value;
    const passwordRef=useRef("");
    console.log(name)
    

    useEffect(()=>{
        const getArticles = async () => {
            
            const res = await Axios.get("http://localhost:8080/api/password/"+name);
            setPassword(res.data);
            console.log(password);
          };
          getArticles()},[readytosubmit])  
    
        
       
    
    function handlesubmit(e){
        //must need
        e.preventDefault();
        setReadytosubmit(true);
        console.log(nameRef.current.value)
        console.log(password) 
        console.log(passwordRef.current.value)
        if(passwordRef.current.value.toString()===password.toString()){
            console.log("Ture Password")
        props.login();}else{
            console.log("false password")
        }
    }
    
    
    return (
        <><div className='Registerform'>
            <h3>Login Form</h3><br></br>
            <Form onSubmit=/* {handlesubmit} */{handlesubmit} >
                <Form.Group className="mb-3" controlId="formBasicName">
                    <Form.Label>Username</Form.Label>
                    <Form.Control ref={nameRef} type="username" placeholder="Enter your username" />

                </Form.Group><br></br>
                


                <Form.Group className="mb-3" controlId="formBasicPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control ref={passwordRef} type="password" placeholder="Password" />
                    
                </Form.Group><br></br>

               

                <Button variant="primary" type="submit">
                    Submit
                </Button>
            </Form>
            </div>
            
            <Button onClick={props.login} variant="primary">Primary</Button> </>) }//<--- this works fine <Link
        //to={{pathname:'/layout',state:loginStatus}} />*/)}
    


 
export default Login ;

my console log is:

login.jsx:41 alex <-- i click the submitform
login.jsx:42      <--empty result which is expected the password get from the database
login.jsx:43 123456
login.jsx:47 false password
login.jsx:22 alex
login.jsx:22 alex
login.jsx:30      
login.jsx:22 alex
login.jsx:22 alex
login.jsx:41 alex
login.jsx:42 123456
login.jsx:43 123456 <----have the resubmit after double click
login.jsx:45 Ture Password
index.js:32 loginstatusfalse
index.js:33 login
layout.jsx:28 layout: true
layout.jsx:28 layout: true
login.jsx:22 alex
login.jsx:22 alex

When first time click the form , useEffect didnt work Second click works.I suspect the reason is on the parameter that i pass to the useeffect I would like to know how the bug occur and how can i fix it Hope that anyone can help me with this

Answer 1

I think part of the problem is that you are performing the password check before the result has been returned from the async function. Don't think you even need the useEffect - it can all be handled within handlesubmit.

function handlesubmit(e){
    e.preventDefault();
    getArticles();
}

const getArticles = async () => {
        
    const res = await Axios.get("http://localhost:8080/api/password/"+name);
    if(passwordRef.current.value.toString()===res.data){
        console.log("Ture Password")
        props.login();
    }else{
        console.log("false password")
    }
};