ReactJS carte par l'Objet
J'ai une réponse comme celle-ci:
Je veux afficher le nom de chaque objet à l'intérieur de ce code HTML:
{subjects.map((item, i) => (
<li className="travelcompany-input" key={i}>
<span className="input-label">{ item.name }</span>
</li>
))}
Mais il déclenche une erreur de subjects.map is not a function
.
Tout d'abord, je dois définir les clés des objets où elle crée un tableau de clés, là où je veux en boucle et de montrer la subject.names
.
Ce que j'ai aussi essayé ceci:
{Object.keys(subjects).map((item, i) => (
<li className="travelcompany-input" key={i}>
<span className="input-label">key: {i} Name: {subjects[i]}</span>
</li>
))}
- Thnx pour dire que vous connaissez la réponse?
Vous devez vous connecter pour publier un commentaire.
Lors de l'appel de
Object.keys
elle retourne un tableau de l'objet avec les touches.Object.keys({ test: '', test2: ''}) //['test', 'test2']
Lorsque vous appelez
Array.map
la fonction prend 2 arguments; 1. l'élément 2. de l'index.Lorsque vous voulez récupérer les données, vous devez utiliser
item
au lieu dei
Vous obtenez ce message d'erreur parce que votre variable
subjects
est unObject
pasArray
, vous pouvez utilisermap()
seulement pour le Tableau.Dans le cas de la cartographie de l'objet, vous pouvez le faire:
Carte les clés de l'objet à l'aide de l'Objet.keys():
{Object.keys(yourObject).map(function(key) {
return <div>Key: {key}, Value: {yourObject[key]}</div>;
})}
Vous obtenez une erreur lorsque vous essayez de mapper à travers les clés de l'objet, ou faut-il jeter quelque chose d'autre.
Noter également lorsque vous voulez mapper les touches que vous assurez-vous de consulter les clés de l'objet correctement. Juste comme ça:
Vous devez utiliser
{subjects[item]}
au lieu de{subjects[i]}
, car il renvoie à l'clés de l'objet. Si vous recherchez sujets[je] vous aurez défini.