J'ai une fonction .map () sur un tableau.
Quand je fais un console.log (objet) dans le .map, il enregistre l'objet .
Mais quand je fais cela ne montre rien.
Pas non plus dans l'outil d'inspection.
Composant:
export const StyledImagesList = styled.ul;
StyledImagesList n'a pas de style
<StyledImagesList>
{this.state.images.map((imageObject, key) => {
// <img src={imageObject.contentUrl} title={imageObject.name} />
<li key={key}>{imageObject.name}</li>
{console.log(imageObject)}
})}
</StyledImagesList>
Une idée de la raison pour laquelle mes li ne seront pas visibles?
3 Réponses :
Le renvoi de l'élément map () devrait résoudre le problème:
<StyledImagesList>
{ this.state.images.map((imageObject, key) => <li key={key}>{imageObject.name}</li>) }
</StyledImagesList>
Si la connexion à la console était pas nécessaire, vous pourriez obtenir le même résultat avec l'équivalent plus concis de:
<StyledImagesList>
{ this.state.images.map((imageObject, key) => {
// <img src={imageObject.contentUrl} title={imageObject.name} />
/* Logging would need to happen before the return */
console.log(imageObject);
/* Add return here */
return <li key={key}>{imageObject.name}</li>
}) }
</StyledImagesList>
Il y a un raccourci ici pour la journalisation => console.log (imageObject) ||
Agréable! Merci pour cela, cela pourrait être utile 😊
Le retour est manquant. Soit
this.state.images.map((imageObject, key) => (
<li key={key}>{imageObject.name}</li>
))
ou
this.state.images.map((imageObject, key) => {
return <li key={key}>{imageObject.name}</li>;
})
Map () utilise return dans son bloc de code afin de pousser chaque élément vers un NOUVEAU tableau. Cela ne touche pas à l'original.
Le code que vous faites à l'intérieur de la boucle s'exécute en fait ... C'est juste que vous n'avez rien en retour à montrer.
Faire
return <li key={key}>{imageObject.name}</li>
vous construira un nouveau tableau avec ces éléments html pour vous.
La méthode map () crée un nouveau tableau avec les résultats de l'appel d'une fonction pour chaque élément du tableau.
La méthode map () appelle la fonction fournie une fois pour chaque élément d'un tableau, dans l'ordre.
Remarque: map () n'exécute pas la fonction pour les éléments de tableau sans valeurs.
Remarque: map () ne modifie pas le tableau d'origine.
vous devez renvoyer quelque chose dans une carte
@JaromandaX mais bien sûr ... Merci pour l'aide;)