編輯：添加評論以使閱讀更流暢
注意：這是我的第一個 React.js 應用程式，我從未成功實作過 useState() 或 useEffect() 鉤子！
問題
我已將 JS 物件從子元素 (LoginInputForm.js) 傳遞到其父元素 (Login.js)，并且運行順利。我正在執行的整個 API 呼叫在沒有 useEffect() 的情況下完美運行，但不執行我期望它執行的條件邏輯，即“僅在獲取資料時執行此 API 呼叫并使用結果更新全域背景關系從您的子元素，但在那之前，延遲您的程序（仍然會創建一個加載部分，以便在功能正常作業時在此期間顯示)"。我這樣做是因為我希望在登錄時在此演示中模擬一個身份驗證系統，并且只想在我從我的自定義 RESTful API 獲取用戶 ID 時登錄（它運行良好，由我的許多測驗確定角度）。我可以看到我構建的登錄螢屏 GUI，但是當我嘗試使用我的資料庫中的一個用戶的詳細資訊登錄時，前端基本上停止渲染任何組件（或無限渲染它們？）并抱怨console.log() 陳述句中的錯誤訊息。
錯誤型別
React 正在拋出一個未捕獲的 TypeError。它與我在 useEffect() 中稱為“用戶名”和“密碼”的兩個變數有關。即使使用我的 if() 陳述句，它仍然絕對堅持要處理這兩個變數。
我試過的
我嘗試在 useEffect() 陳述句中不使用任何依賴項（這會導致無限回圈），我已經嘗試在 React 本身建議的 useEffect() 陳述句中使用所有建議的依賴項（這更加破壞了它），我'已嘗試按照 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的大師！
uj5u.com熱心網友回復：
如果我錯了，請糾正我，但我覺得當父母從孩子那里獲取資料時，你正試圖在父母中進行 API 呼叫。如果是這種情況，那么您在 useEffect 中傳遞的依賴項對我來說沒有意義。
我強烈認為您應該只在依賴項中傳遞反應狀態（我的個人意見）。
此外，“loginData”變數不是一個狀態，它應該是一個狀態，這樣即使父母重新渲染你也不會失去你從孩子那里得到的東西。
您可以在代碼中進行的更改：-
將 loginData 更改為反應狀態
const [loginData,setLoginData] = useState();將 getLoginData 更新為：-
function getLoginData(userLoginData) { setLoginData(userLoginData); }將您的 useEffect 更新為以下內容：-
useEffect(() => { if(loginData?.username && loginData?.password){ // Do your api call here } },[loginData])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/520526.html