Comment mapper un tableau d'objets de Réagir

J'ai un tableau d'objets. Je voudrais une carte ce tableau d'objets. Je sais comment faire la carte d'un tableau, mais ne peuvent pas comprendre comment mapper un tableau d'objets. Voici ce que j'ai fait jusqu'à présent :

Le tableau d'objets que je veux à la carte :

const theData = [
    {
        name: 'Sam',
        email: '[email protected]'
    },

    {
        name: 'Ash',
        email: '[email protected]'
    }
]

Mon composant :

class ContactData extends Component {
    render() {
        //works for array
        const renData = this.props.dataA.map((data, idx) => {
            return <p key={idx}>{data}</p>
        });

        //doesn't work for array of objects
        const renObjData = this.props.data.map(function(data, idx) {
            return <p key={idx}>{data}</p>
        });

        return (
            <div>
                //works
                {rennData}
                <p>object</p>
                //doesn't work
                {renObjData}
            </div>
        )
    }
}


ContactData.PropTypes = {
    data: PropTypes.arrayOf(
        PropTypes.obj
    ),
    dataA: PropTypes.array
}

ContactData.defaultProps = {
    data: theData,
    dataA: dataArray
}

Ce qui me manque ?

Les données que vous souhaitez imprimer est un tableau bien?
Double Possible de carte de fonction pour les objets (au lieu de tableaux)
est [object object] d'être imprimé dans le <p> tag quand u essayé de l'exécuter
Non, rien n'est retourné

InformationsquelleAutor user3622460 | 2016-12-07

14

Ce que vous avez besoin est de faire un plan de votre tableau d'objets et n'oubliez pas que chaque élément sera un objet, de sorte que vous pourrez utiliser par exemple la notation point à prendre les valeurs de l'objet.

Dans votre composant
```
 [
    {
        name: 'Sam',
        email: '[email protected]'
    },

    {
        name: 'Ash',
        email: '[email protected]'
    }
].map((anObjectMapped, index) => {
    return (
        <p key={`${anObjectMapped.name}_{anObjectMapped.email}`}>
            {anObjectMapped.name} - {anObjectMapped.email}
        </p>
    );
})
```
Et rappelez-vous quand vous placez un tableau de jsx il a un sens différent et vous ne pouvez pas simplement mettre l'objet dans votre méthode render comme vous pouvez le mettre dans un tableau.

Prendre un coup d'oeil à ma réponse à le mappage d'un tableau à jsx
- Ne pouvez pas obtenir que cela fonctionne, les pauses, la construction et la rien ne rend.
- Oups gauche un '.' de ma faute. Fonctionne très bien, je vous remercie pour l'expliquer aussi pourquoi
InformationsquelleAutor FurkanO

Je pense que vous voulez imprimer le nom de la personne ou à la fois le nom et l'adresse électronique :

const renObjData = this.props.data.map(function(data, idx) {
    return <p key={idx}>{data.name}</p>;
});

ou :

const renObjData = this.props.data.map(function(data, idx) {
   return ([
       <p key={idx}>{data.name}</p>,
       <p key={idx}>{data.email}</p>,
   ]);
});

Cela ne renvoie le nom de l'objet. Par exemple, si je le lance il retourne Sam et de Cendres, mais pas l'e-mail de la valeur de l'objet

InformationsquelleAutor Sagi_Avinash_Varma

@FurkanO a condition que la bonne approche. Bien que d'aller pour une version plus propre approche (es6 façon), vous pouvez faire quelque chose comme ceci

[{
    name: 'Sam',
    email: '[email protected]'
 },
 {
    name: 'Ash',
    email: '[email protected]'
 }
].map( ( {name, email} ) => {
    return <p key={email}>{name} - {email}</p>
})

Cheers!

InformationsquelleAutor Aakash

essayez l'extrait de code suivant

const renObjData = this.props.data.map(function(data, idx) {
    return <ul key={idx}>{$.map(data,(val,ind) => {
        return (<li>{val}</li>);
    }
    }</ul>;
});

A une erreur de syntaxe
supprimé l'erreur de syntaxe, essayez-le maintenant ..

InformationsquelleAutor amritdevilo

Vous devez vous connecter pour publier un commentaire.