React登录页面认证异常：正确凭证需点击两次提交才生效

问题出在异步操作的执行顺序上：你调用axios.post发送登录请求后，立刻就去判断auth的值，但这时候请求还没完成，auth还是初始的"Wrong"状态，所以第一次点击会触发错误提示。等请求成功返回后，setAuth(res.data.message)把auth改成了"OK"，第二次点击时，判断条件才满足，就能正常跳转了。

把跳转和状态判断的逻辑移到axios.post的then回调里，确保只有在请求成功返回后再处理登录逻辑：

import React, { useState } from "react";
import axios from "axios";
const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [mssg, setMssg] = useState("");

  const handleUser = (e) => {
    setUsername(e.target.value);
  };

  const handlePassword = (e) => {
    setPassword(e.target.value);
  };

  const login = (e) => {
    e.preventDefault();
    const user = { username, password };
    console.log(user);
    
    axios
      .post("http://localhost:5000/auth", user)
      .then((res) => {
        const message = res.data.message;
        if (message === "OK") {
          sessionStorage.setItem("user", username);
          window.location = "/dashboard";
        } else {
          setMssg("Invalid Details. Please try again");
        }
      })
      .catch((err) => {
        console.log(err);
        setMssg("Login failed, please try again later");
      });
  };

  return (
    <div>
      <form onSubmit={login}>
        <input onChange={handleUser} placeholder="Username"></input>
        <input type="password" onChange={handlePassword} placeholder="Password"></input>
        <input type="submit" value="Login"></input>
      </form>
      <p id="mssg">{mssg}</p>
    </div>
  );
};

export default Login;

• 去掉了冗余的auth状态，直接用接口返回的message判断，避免依赖React状态更新的异步性
• 把登录成功/失败的逻辑都放到then回调内，确保接口返回后再执行对应操作
• 给catch分支添加了错误提示，处理网络异常等请求失败的情况
• 给输入框和提交按钮补充了占位文本与显示值，提升基础用户体验

内容的提问来源于stack exchange，提问作者Hetarth7