為什麼我的 useEffect 無法「取得」數據，直到我必須將 props 重寫到其他元件...？

Question

我嘗試從伺服器「取得」「使用者資訊」。

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' 不起作用？ ？ ？

Answer 1

因為userData是未定義。您沒有顯示在何處/如何初始化它，但大概是這樣的？ ：

const [userData, setUserData] = useState();

這會將其初始化為未定義。因此，當元件首次呈現時，您無法從 userData 讀取屬性，因為它是未定義。它可能在稍後的時間有一個值，但那時程式碼已經拋出了錯誤。

一種選擇是將其初始化為空物件：

const [userData, setUserData] = useState({});

在這種情況下，userData.memberId 不會拋出錯誤，但會向該元件傳遞一個 undefined 值。

另一個選項是在 userData 具有值之前不渲染元件：

<div>
  { userData ? <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} /> : null }
</div>

您喜歡什麼選項完全取決於您。但最主要的是您無法從 undefined 讀取屬性。