Pourquoi mon useEffect ne « récupère-t-il » pas les données jusqu'à ce que je doive remplacer les accessoires par d'autres composants... ?

Question

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 ? ? ?

Answer 1

Parce queuserData是未定义. Vous ne montrez pas où/comment vous l'initialisez, mais quelque chose comme ça ? :

const [userData, setUserData] = useState();

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 userData n'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 .