React中调用GraphQL登录函数出现重复返回结果问题求助

问题根源 #

你当前代码的核心问题是：useLazyQuery发起的是异步请求，调用getToken后立刻读取dataResponse.data时，新请求还未完成，此时拿到的是上一次请求的缓存数据，这就导致每次修改输入后首次点击总是返回旧结果，二次点击时新请求才完成，才能拿到正确数据。

解决方案 #

下面提供两种最直接的修复方式：

方案1：用useEffect监听请求结果变化

将结果判断逻辑从handleLogin中移出，通过useEffect监听dataResponse.data的更新，确保只在新请求完成后处理结果：

import { useEffect } from 'react';

// ... 其他原有代码

const handleLogin = (event) => {
  event.preventDefault();
  // 仅发起请求，不在这里处理结果
  getToken({ variables: { email: mailInputData, password: passwordInputData } });
};

// 监听请求结果的变化，处理登录逻辑
useEffect(() => {
  if (dataResponse.data) {
    const loginResult = dataResponse.data.authLogin;
    if (loginResult !== "User not found" && loginResult !== "Wrong password") {
      localStorage.setItem('token', loginResult);
      window.location.href = "/dashboard";
    } else {
      Swal.fire({
        icon: "error",
        title: "Oops...",
        text: "Usuario o contraseña incorrectos",
      });
    }
  }
}, [dataResponse.data]); // 仅当请求结果更新时执行

方案2：使用useLazyQuery的onCompleted回调

在初始化useLazyQuery时配置onCompleted回调，请求完成后自动触发结果处理：

const [getToken] = useLazyQuery(DATA_QUERY_LOGIN, {
  onCompleted: (data) => {
    const loginResult = data.authLogin;
    if (loginResult !== "User not found" && loginResult !== "Wrong password") {
      localStorage.setItem('token', loginResult);
      window.location.href = "/dashboard";
    } else {
      Swal.fire({
        icon: "error",
        title: "Oops...",
        text: "Usuario o contraseña incorrectos",
      });
    }
  }
});

const handleLogin = (event) => {
  event.preventDefault();
  getToken({ variables: { email: mailInputData, password: passwordInputData } });
};

额外优化建议 #

如果按钮在<form>标签内，建议将handleLogin绑定到表单的onSubmit事件，而非按钮的onClick，这样event.preventDefault()能更可靠地阻止表单默认提交行为：

<form onSubmit={handleLogin}>
  {/* 邮箱、密码输入框 */}
  <MDButton variant="gradient" color="dark" fullWidth type="submit">
    Login
  </MDButton>
</form>

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