Warum „ruft“ mein useEffect die Daten nicht ab, bis ich die Requisiten für andere Komponenten überschreiben muss ...?

Question

Ich versuche, „Benutzerinformationen“ vom Server zu „bekommen“.

API-GET-URL ist: /users/${memberId} userID ist eine numerische Mitglieds-ID (Beispiel 4)

Hier sind meine Fragen..

Wenn ich auf „userIcon“ auf „ „ klicke, sollte ich die Seite verlinken und die korrekten Benutzerinformationen laden

Wenn ich versuche, die Seite des Localhosts direkt zu überprüfen, wird sie nicht angezeigt. Aber wenn ich „ userId={userData.memberId} “ entferne, wird die Seite angezeigt und neu geschrieben „userId={userData.memberId}“ und speichern, die Seite ist normal.

//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>
)

Der Link in „userId={userData.memberId}“ wird für den Pfad UserPage verwendet. Dies ist console.log(userData)

Geben Sie hier eine Bildbeschreibung ein

//LoginHeader.tsx
// UserIcon
            <Link to={`/users/${userID}`}
            state={{userID: userID}}
            className="relative p-2 text-gray-500 bg-transparent"
            >
              <img/>
            </Link>

Das Problem ist, dass es nicht funktioniert und eine Fehlermeldung ausgibt, wenn ich auf das UserIcon klicke. Sagen Sie mir den Fehler <<无法读取未定义的属性（读取'memberId'）>>

Warum funktioniert mein Code nicht? : Klicken Sie auf das Benutzersymbol -> Gehen Sie mit uerl /users/${memberId} zur Benutzerseite. Warum funktioniert useEffect 'GET' nicht, bis ich die MemberId-Requisite in LoginHeader entferne? ? ?

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 读取属性。