登录需双击才能成功、单次点击提示账号密码错误，该如何修复？

问题原因 #

React 中的 setUser 是异步更新方法，调用后不会立刻修改当前作用域下的 user 变量值。你在链式调用的第二个 then 中读取的 user 是本次点击前的旧值，所以第一次点击时判断user.length === 0就会触发错误提示；第二次点击时user已经是第一次请求完成后更新的值，才能正常走登录逻辑。
同时你混用了 async/await 和 then 链式调用两种异步写法，属于不必要的语法冗余。

修复代码 #

直接使用接口返回的实时数据做逻辑判断，不要依赖未更新的状态值，统一用async/await简化逻辑，同时修正不规范配置：

const onSubmit = async (values) => {
  try {
    const response = await axios({
      method: "POST",
      url: 'http://localhost:8000/user/checkLogin',
      data: values,
      withCredentials: true, // 修正为布尔值，原字符串配置更规范
      headers: {
        "Content-Type": "application/json",
        "Accept": 'application/json'
      }
    })
    const userData = response.data
    console.log(JSON.stringify(userData))
    setUser(userData)

    if(userData.length === 0) {
      setMessage("Invalid Email or Password")
    } else {
      localStorage.setItem("userInfo", JSON.stringify(userData))
      history.push("/")
    }
  } catch (error) {
    console.log(error)
  }
}

内容的提问来源于stack exchange，提问作者Võ Khắc Triệu