我嘗試從伺服器「取得」「使用者資訊」。
API GET url 為：/users/${memberId} userID為數字型別memberId（例4）
以下是我的問題..
當我點擊「 」上的「userIcon」時，我應該連結頁面並載入正確的使用者資訊
當我嘗試直接檢查本地主機的頁面時，它沒有顯示。 但是當我刪除“ userId={userData.memberId} ”時，頁面就會顯示並重寫 「 userId={userData.memberId} 」並儲存，頁面也正常了。
//Header.tsx
useEffect(() => {
const userGetData = async () => {
return call(`/users`, 'GET', null)
.then((res) => {
const data = res[0]
setUserData(data);
});
};
userGetData();
}, [])
...
return(
...
<div>
<LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} />
</div>
)
“userId={userData.memberId}”中的連結用於路徑UserPage。 這是console.log(userData)
在此輸入圖像描述
//LoginHeader.tsx
// UserIcon
<Link to={`/users/${userID}`}
state={{userID: userID}}
className="relative p-2 text-gray-500 bg-transparent"
>
<img/>
</Link>
問題是當我單擊該 UserIcon 時，它不起作用並且出現錯誤。 錯誤告訴我<<无法读取未定义的属性（读取'memberId'）>>
那麼..為什麼我的程式碼不起作用？ ：點選使用者圖示 -> 使用 uerl /users/${memberId} 前往 UserPage。 為什麼在我刪除 LoginHeader 中的 memberId 道具之前 useEffect 'GET' 不起作用？ ？ ？
因為
userData是未定義。您沒有顯示在何處/如何初始化它，但大概是這樣的？ ：這會將其初始化為
未定義。因此，當元件首次呈現時，您無法從userData讀取屬性，因為它是未定義。它可能在稍後的時間有一個值，但那時程式碼已經拋出了錯誤。一種選擇是將其初始化為空物件：
const [userData, setUserData] = useState({});在這種情況下，
userData.memberId不會拋出錯誤，但會向該元件傳遞一個undefined值。另一個選項是在
userData具有值之前不渲染元件：<div> { userData ? <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} /> : null } </div>您喜歡什麼選項完全取決於您。但最主要的是您無法從
undefined讀取屬性。