J'essaie d'"obtenir" des "informations utilisateur" du serveur.
L'URL de l'API GET est : /users/${memberId} userID est un memberId de type numérique (Exemple 4)
Voici mes questions..
Lorsque je clique sur "userIcon" sur " ", je dois lier la page et charger les informations utilisateur correctes
Lorsque j'essaie de consulter directement la page de l'hôte local, elle n'apparaît pas. Mais quand je supprime " userId={userData.memberId} " la page s'affiche et se réécrit "userId={userData.memberId}" et enregistrez, la page est normale.
//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>
)
Le lien dans "userId={userData.memberId}" est utilisé pour le chemin UserPage. Ceci est console.log(userData)
Entrez la description de l'image ici
//LoginHeader.tsx
// UserIcon
<Link to={`/users/${userID}`}
state={{userID: userID}}
className="relative p-2 text-gray-500 bg-transparent"
>
<img/>
</Link>
Le problème est que lorsque je clique sur l'icône utilisateur, cela ne fonctionne pas et génère une erreur. Dites-moi l'erreur <<无法读取未定义的属性（读取'memberId'）>>
Alors… pourquoi mon code ne fonctionne-t-il pas ? : Cliquez sur l'icône de l'utilisateur -> Accédez à UserPage en utilisant uerl /users/${memberId}. Pourquoi useEffect 'GET' ne fonctionne-t-il pas jusqu'à ce que je supprime le prop memberId dans LoginHeader ? ? ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Parce que
userData是未定义. Vous ne montrez pas où/comment vous l'initialisez, mais quelque chose comme ça ? :Cela l'initialisera à
未定义。因此，当组件首次呈现时，您无法从userData读取属性，因为它是未定义. Il pourrait avoir une valeur plus tard, mais à ce moment-là, le code a déjà généré l'erreur.Une option consiste à l'initialiser comme un objet vide :
const [userData, setUserData] = useState({});Dans ce cas,
userData.memberId不会抛出错误，但会向该组件传递一个undefinedvaleur.Une autre option consiste à ne pas restituer le composant tant que
userDatan'a pas une valeur :<div> { userData ? <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} /> : null } </div>L’option que vous préférez dépend entièrement de vous. Mais le principal est que vous ne pouvez pas lire les propriétés de
undefined.