单击某个按钮后反应状态没有改变

Question

按一次Log In按钮调用handleButton后，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;

Answer 1

在读取函数中确保 checkuser returns a promise.You 可以使用 then 并仅在 js 的情况下捕获 promises.From 你的代码很明显 checkuser 不是一个承诺它只是一个函数，所以只需将其更改为承诺或以其他方式删除 then 方法。查看此以了解 js promises

Answer 2

编辑，我不会删除下面的第一段，但它不对，将它用作下面@Yousaf 评论的上下文。

所以，为了继续，您尝试调用 then 一个已经被您放入 checkRegister 的第一个 then 消耗的承诺。这与如何处理承诺无关，您可以在此处阅读更多相关信息：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

单击某个按钮后反应状态没有改变

React state not changing after clicking some button

javascript

asynchronous

event-handling

reactjs

axios