时间戳

首页 > 解决方案 > React 17：为什么我必须发送两次 post 请求才能获得有效或错误响应？

reactjs - React 17：为什么我必须发送两次 post 请求才能获得有效或错误响应？

问题描述

我使用 react-google-login 包和 react-facebook-login 以及 symfony 后端创建了一个身份验证应用程序。

只有当我在 Google 或 Facebook 按钮上单击两次时，它才有效。

我知道首先数据是未定义的，所以函数“test()”没有被执行，但我不知道当数据不再为空时如何自动“重新加载”函数。

const Google = () => {
  const [data, setData] = useState();
  const [error, setError] = useState();

  const responseGoogle = (response) => {
    setData({
      name: response.profileObj.familyName,
      firstname: response.profileObj.givenName,
      authid: response.profileObj.googleId,
      email: response.profileObj.email,
      token: response.tokenId,
    });

    if (data) {
      const test = async () => {
        try {
          setError("");
          let result = await signGoogle(data);
          localStorage.setItem("token", result.data.token);
          window.location.href = "/";
        } catch (error) {
          if (error.response) {
            setError("You have already been registered with " + error.response.data.provider);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log("Error", error.message);
          }
        }
      };

      test();
    }
  };
  return (
    <React.Fragment>
      <GoogleLogin
        clientId="ID.apps.googleusercontent.com"
        buttonText="Google"
        onSuccess={responseGoogle}
        onFailure={responseGoogle}
        cookiePolicy={"single_host_origin"}
        redirectUri="https://localhost:3000"
      />
      {error && <p> {error}</p>}
    </React.Fragment>
  );
};

我尝试将 useEffect 与依赖项（[数据]）一起使用，但它总是以无限循环结束。

  useEffect(() => {
    if (data) {
      test();
    }
  }, [data]);

标签： reactjs

解决方案

您应该在调用 setState 之前创建新变量并在条件中使用它：

const responseGoogle = (response) => {
  const newData = {
    name: response.profileObj.familyName,
    firstname: response.profileObj.givenName,
    authid: response.profileObj.googleId,
    email: response.profileObj.email,
    token: response.tokenId,
  };
  setData(newData);

  if (newData) {
    const test = async () => {
      try {
        setError("");
        let result = await signGoogle(newData);
        localStorage.setItem("token", result.data.token);
        window.location.href = "/";
      } catch (error) {
        if (error.response) {
          setError("You have already been registered with " + error.response.data.provider);
        } else if (error.request) {
          console.log(error.request);
        } else {
          console.log("Error", error.message);
        }
      }
    };

    test();
  }
};

推荐阅读