web-dev-qa-db-fra.com

Carte ReactJS via Object

J'ai une réponse comme celle-ci:

enter image description here

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 cela jette une erreur de subjects.map is not a function.

Tout d'abord, je dois définir les clés des objets où il crée un tableau de clés, où je veux faire une boucle et montrer le subject.names.

Ce que j'ai aussi essayé, c'est ceci:

{Object.keys(subjects).map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">key: {i} Name: {subjects[i]}</span>
  </li>
))}
javascriptreactjsjsx
16
Sireini

Lorsque vous appelez Object.keys, Il retourne un tableau des clés de l'objet.

Object.keys({ test: '', test2: ''}) // ['test', 'test2']

Lorsque vous appelez Array.map, La fonction prend 2 arguments. 1. l'élément, 2. l'index.

Lorsque vous souhaitez obtenir les données, vous devez utiliser item au lieu de i.

{Object.keys(subjects).map((keyName, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">key: {i} Name: {subjects[keyName]}</span>
    </li>
))}
47
TryingToImprove

Vous obtenez cette erreur car votre variable subjects est une Object pas Array, vous pouvez utiliser map() uniquement pour Array.

En cas d'objet de mappage, vous pouvez faire ceci:

{ 
    Object.keys(subjects).map((item, i) => (
        <li className="travelcompany-input" key={i}>
            <span className="input-label">{ subjects[item].name }</span>
        </li>
    ))
}
5
Gayane

Mappez sur les clés de l'objet à l'aide de Object.keys ():

{Object.keys(yourObject).map(function(key) { return <div>Key: {key}, Value: {yourObject[key]}</div>; })}

4
Rami Salim

Avez-vous une erreur lorsque vous essayez de mapper à travers les clés d'objet, ou jette-t-il autre chose.

Notez également que lorsque vous souhaitez mapper à travers les clés, vous devez vous assurer de vous référer correctement aux clés d'objet. Juste comme ça:

{ Object.keys(subjects).map((item, i) => (
   <li className="travelcompany-input" key={i}>
     <span className="input-label">key: {i} Name: {subjects[item]}</span>
    </li>
))}

Vous devez utiliser {subjects[item]} au lieu de {subjects[i]} parce qu'il fait référence aux clés de l'objet. Si vous recherchez des sujets [i], vous serez indéfini.

1
noa-dev