Блог

После вызова handleButton , нажав Log In кнопку один раз, значение logInStatus пусто. Однако после второго щелчка значение logInStatus изменится. Я знаю, что setState-это асинхронный вызов, поэтому он не обновит значение logInStatus мгновенно. Как я должен подойти к решению?

 import React, {setState, useState, useEffect } from "react";
import Axios from "axios";
const Login = () => {
    useEffect(() => {
        document.title = 'Log In';
    });
    const [data, setData] = useState(null);
    const [username, setName] = useState('');
    const [password, setPassword] = useState('');
    const [logInStatus, setlogInStatus] = useState('');
    const user = [password,username]
    
    function read(user){
        let returned = checkRegister(user);
        returned.then(function(result) {
            setlogInStatus(result.data.message);
            //return setlogInStatus(result)
         });
    }

    const handleButton = (e) => {
        read(user);
        e.preventDefault();
        //logInStatus is empty here even it should contain soimething
        if(logInStatus == "Successfully Authenticated"){
            //do stuff
        }
     }
    function checkRegister(user) {
        const user_object = {
            username: user[1],
            password: user[0]
        }
        console.log(user_object)
        var ok;
            return Axios({
                method: "POST",
                data: user_object,
                withCredentials: true,
                url: "http://localhost:9000/users/login",
              });
    }
    return(
        
        <div className="login">
             <div>
      </div>
            <div className="userform">
            <h2 className="pagename">Log in</h2>
            <form>
                {/* <label>Username:</label> */}
                <input
                    type="text"
                    required
                    value={ username }
                    onChange={ (e) => setName(e.target.value) }
                    placeholder="Username"
                />
                {/* <label>Password:</label> */}
                <input
                    type="password"
                    required
                    value={ password }
                    onChange={ (e) => setPassword(e.target.value) }
                    placeholder="Password"
                />
                <button onClick={handleButton}>Log In</button>
                <h1>{logInStatus} </h1>
            </form>
            </div> 
        </div>
    );
}
export default Login;
 

Отредактируйте, я не буду удалять первый абзац ниже, но это неправильно, используйте его в качестве контекста для комментария @Yousaf ниже.

Итак, чтобы продолжить, вы попытались then призвать обещание, которое уже было выполнено первым then , в которое вы вложили checkRegister . Что не может работать в связи с тем, как обрабатывать обещание, вы можете прочитать больше об этом здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise. Как я уже сказал, вам нужно выбирать между тем, потреблять его непосредственно в checkRegister свою функцию или потреблять после read нее. И установите состояние в соответствии с тем выбором, который вы делали раньше, где у вас есть доступ к вашему результату.

Вы должны поставить ключевое function слово перед checkRegister тем, как объявить его как оно.

Вы можете удалить var ok; то, что бесполезно и используется здесь. Вы также можете удалить вызванный импорт setState , который тоже не использовался.

И, наконец, вы можете удалить e.preventDefault(); то, что в вашем случае бесполезно, потому что вы используете простую кнопку, не связанную с вашей формой. Вы можете узнать больше о формах здесь: https://reactjs.org/docs/forms.html

В функции чтения убедитесь, что checkuser возвращает обещание.Вы можете использовать тогда и ловить только в случае обещаний js.Из вашего кода ясно, что checkuser-это не обещание, это просто функция, поэтому просто измените ее на обещание или иным образом удалите метод then. Проверьте это, чтобы узнать о обещаниях js