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读取属性，因为它是未定义。它可能在稍后的时间有一个值，但那时代码已经抛出了错误。一种选择是将其初始化为空对象：
const [userData, setUserData] = useState({});在这种情况下，
userData.memberId不会抛出错误，但会向该组件传递一个undefined值。另一个选项是在
userData具有值之前不渲染组件：<div> { userData ? <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} /> : null } </div>您更喜欢什么选项完全取决于您。但最主要的是您无法从
undefined读取属性。