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? ? ?
因为
userData
是未定义
。您没有显示在何处/如何初始化它,但大概是这样的?:这会将其初始化为
未定义
。因此,当组件首次呈现时,您无法从userData
读取属性,因为它是未定义
。它可能在稍后的时间有一个值,但那时代码已经抛出了错误。一种选择是将其初始化为空对象:
在这种情况下,
userData.memberId
不会抛出错误,但会向该组件传递一个undefined
值。另一个选项是在
userData
具有值之前不渲染组件:您更喜欢什么选项完全取决于您。但最主要的是您无法从
undefined
读取属性。