在 ReactJS 中登录需要两次点击

大佬教程收集整理的这篇文章主要介绍了在 ReactJS 中登录需要两次点击，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 ReactJS 中登录需要两次点击？

开发过程中遇到在 ReactJS 中登录需要两次点击的问题如何解决？下面主要结合日常开发的经验，给出你关于在 ReactJS 中登录需要两次点击的解决方法建议，希望对你解决在 ReactJS 中登录需要两次点击有所启发或帮助；

我正在尝试制作登录页面，并且在某种程度上取得了成功。所以这是我的登录组件：

    import React,{ useState,useEffect } from "react";
import Axios from "axios";
import useForm from "../components/LoginForm/useForm";
import valIDate from "components/LoginForm/valIDate";
import redtruck from "../assets/img/red-truck.png";
import auth from "../Authentication/auth";

import { withRouter } from "react-router";

const Login = ({ submitForm,history }) => {
  const [issubmitted,setIssubmitted] = useState(false);
  const [loading,setLoading] = useState(false);
  const [error,setError] = useState(false);
  const [login,setLogin] = useState(false);

  async function submitForm() {
    setIssubmitted(true);
    try {
      await fetchLogin(values.email,values.password);
      if(login){
        auth.login(() => {
          history.push("/admin");
        });
      }
    } catch (E) {
      auth.login(() => {
        history.push("/");
      })
    }
  }

  const { handleChange,values,handlesubmit,errors } = useForm(
    submitForm,valIDate
  );

  useEffect(() => {
    if (localstorage.getItem("user-info")) {
      submitForm();
    }
  },[]);
  const fetchLogin = async (email,password) => {
    try {
      setLoading(true);
      const res = await Axios({
        method: "POST",url: `url`,headers: {
        },data: {
          user_email: email,user_password: password,},});
      if (res.status === 200) {
        setLogin(true);
        localstorage.setItem("user-info",JsON.Stringify(res.data));
      }
      setLoading(false);
    } catch (err) {
      setError(err.messagE);
      setLoading(false);
    }
  };

  return (
    <>
      <div>
        <div classname="form-container">
          <div classname="form-content-left">
            <img classname="form-img" src={redtruck} alt="spaceship" />
          </div>
          <div classname="form-content-right">
            <h1>SIGN IN</h1>
            <form classname="form" onsubmit={handlesubmit}>
              <div classname="form-inputs">
                <label HTMLFor="email" classname="form-label">
                  Email address
                </label>
                <input
                  ID="signin-email"
                  type="email"
                  name="email"
                  placeholder="Enter email"
                  classname="form-input"
                  value={values.email}
                  onChange={handleChangE}
                />
                {errors.email && <p>{errors.email}</p>}
              </div>
              <div classname="form-inputs">
                <label HTMLFor="password" classname="form-label">
                  password
                </label>
                <input
                  ID="signin-password"
                  type="password"
                  name="password"
                  placeholder="password"
                  classname="form-input"
                  value={values.passworD}
                  onChange={handleChangE}
                />
                {errors.password && <p>{errors.passworD}</p>}
                {login ? "" : <p>The password or the email is wrong</p>}
              </div>
              <button
                variant="priMary"
                type="submit"
                classname="form-input-btn"
              >
                LOGIN
              </button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default withRouter(Login);
@H_772_7@
因此，当电子邮件和密码适合用户时，login 状态设置为 true。后来我想在将页面重定向到“/admin”时使用它。但我的问题是我必须首先单击两次才能登录。此外我不确定，如果捕获部分是正确的：
catch (E) {
      auth.login(() => {
        history.push("/");
      })
    }
@H_772_7@
所以我会很高兴，如果你能给我一些提示。
谢谢...
 
解决方法

        
不是你必须按两次，你可以检查组件状态，有时React批量setState然后更新值。你可以看看这个setState doesn't update the state immediately
      
 


 
 
      
大佬总结
       
以上是大佬教程为你收集整理的在 ReactJS 中登录需要两次点击全部内容，希望文章能够帮你解决在 ReactJS 中登录需要两次点击所遇到的程序开发问题。
		
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。