web-dev-qa-db-fra.com

Comment mapper un tableau d'objets dans React

J'ai un tableau d'objets. Je voudrais cartographier ce tableau d'objets. Je sais comment mapper un tableau, mais je ne sais pas comment mapper un tableau d'objets. Voici ce que j'ai fait jusqu'à présent: 

Le tableau d'objets que je veux mapper: 

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
}

Qu'est-ce que je rate ?

arraysobjectdictionaryreactjscomponents
8
user3622460

Ce dont vous avez besoin est de mapper votre tableau d'objets et de vous rappeler que chaque élément sera un objet, de sorte que vous utiliserez par exemple la notation pointée pour 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 que lorsque vous mettez un tableau de jsx, il a une signification différente et vous ne pouvez pas simplement mettre un objet dans votre méthode de rendu car vous pouvez placer un tableau. 

Regardez ma réponse à mapper un tableau sur jsx

14
FurkanO

Je pense que vous voulez imprimer le nom de la personne ou les deux le nom et l'email:

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>,
   ]);
});
2
Sagi_Avinash_Varma

@FurkanO a fourni la bonne approche. Bien que pour adopter une approche plus propre (moyen 6), 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>
})

À votre santé!

1
Aakash

essayez l'extrait suivant

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