• EDIT：添加注解以使阅读更流畅 *
• 注意：这是我的第一个React.js应用程序，我从未成功实现过useState（）或useEffect（）钩子！*

问题
我从子元素传递了一个JS对象（LoginInputForm.js）添加到其父元素我正在执行的整个API调用在没有useEffect的情况下工作得很好（），但不执行我希望它执行的条件逻辑，即“仅执行此API调用，并在从子元素获取数据时用结果更新全局上下文，但在此之前，请推迟您的流程（* 当功能正常工作时，仍将创建一个加载部分以在此过渡期间显示 *）"。我这样做是因为我希望在登录时模拟此演示中的身份验证系统，并且只希望在从自定义RESTful API获取用户ID时登录（这是完美的工作，从我的许多测试Angular 确定）。我可以看到我已经构建的登录屏幕GUI，但当我试图用我的DB中的一个用户的详细信息登录时，前端基本上停止呈现任何组件（或者无限地呈现它们？2）并在console.log（）语句中抱怨错误消息。

错误类型

React正在抛出一个未捕获的TypeError。它与我在useEffect（）中的两个变量“username”和“password”有关。即使使用我的if（）语句，它仍然绝对坚持要处理这两个变量。

我的尝试

我尝试过在useEffect中不使用依赖项（）陈述式（这导致了无限循环），我尝试在useEffect中使用所有建议的依赖项（）React本身建议的声明（这更破坏了它），我试着按照Udemy课程中的建议删除它的状态依赖。（这是不好的做法，所以我读过），但仍然不能正常工作。
代码墙

import LoginLogo from "../components/login_components/LoginLogo";
import LoginHeader from "../components/login_components/LoginHeader";
import LoginInputForm from "../components/login_components/LoginInputForm";
import UserInputCard from "../components/ui/UserInputCard";
import React from "react";
import { useContext, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import CurrentUserContext from "../storage/current-user-context";

function LoginPage() {
  const [isLoggingIn, setIsLoggingIn] = useState(false);
  const navigate = useNavigate();
  const currentUserContext = useContext(CurrentUserContext);
  let loginData;

// This is where I get my loginData object
  function getLoginData(userLoginData) {
    loginData = userLoginData;
    setIsLoggingIn(true);
  }

// What I'm currently struggling with
  useEffect(() => {
    if (isLoggingIn) {
      let username = loginData.username;
      let password = loginData.password;
      let userId;

      if (
        username != null &&
        username !== undefined &&
        password != null &&
        password !== undefined
      ) {
        try {
          userId = fetch(
            `https://<my-domain>/api/users/${username}-${password}`
          ).then((response) => {
            console.log("HTTP Status Code: ", response.status);
            if (!response.ok) {
              console.log(response);
              throw new Error(`Error! Current Status: ${response.status}`);
            } else if (response.ok) {
              return response.json();
            }
          });
        } catch (err) {
          console.log(err);
        }
        currentUserContext.getCurrentUser(userId);
        console.log(userId);
      }
      setIsLoggingIn(false);
    }
  }, [currentUserContext, loginData, getLoginData]);

  return (
    <div>
      <UserInputCard>
        <LoginLogo />
        <LoginHeader />
        <LoginInputForm onGetLoginData={getLoginData} />
      </UserInputCard>
    </div>
  );
}

export default LoginPage;

请帮助我，上师的SO！