时间戳

首页 > 解决方案 > 警报在反应项目中运行两次

javascript - 警报在反应项目中运行两次

问题描述

我的无效登录警报在我的反应项目中运行了两次，我不知道为什么。在与服务器端进行身份验证后，我将得到一个响应 true 或 false 并将其设置为 userLogin。

const [userLogin, setUserLogin] = useState(null);
 
  function handleAlert() {
    alert("Invalid Login, Please Try Again.");
    document.getElementById("username").value = "";
    document.getElementById("password").value = "";
  }

这是我的 JSX

{userLogin == false && userLogin !== null
          ? (handleAlert(), setUserLogin(null))
          : null}

我曾尝试在调用它之前放置一个箭头函数，但它完全停止工作。任何人都可以帮助它运行两次吗？谢谢

标签： javascriptreactjsjsx

解决方案

似乎您的组件在状态更改之前重新渲染了两次，我建议使用 useEffect 来运行您在 handleAlert 中拥有的任何代码，并让该 useEffect 依赖于“userLogin”，

就像是

useEffect( () => {
   if(userLogin == false && userLogin !== null){
      alert("Invalid Login, Please Try Again.");
      document.getElementById("username").value = "";
      document.getElementById("password").value = "";
   }
},[userLogin]);

这样您就可以 100% 确定代码只会在 userLogin 更改时运行 希望这对您有用

推荐阅读