web-dev-qa-db-de.com

So ordnen Sie ein Array von Objekten in React zu

Ich habe eine Reihe von Objekten. Ich möchte dieses Array von Objekten abbilden. Ich weiß, wie ein Array zugeordnet wird, aber ich kann nicht herausfinden, wie ein Array von Objekten abgebildet wird. Folgendes habe ich bisher gemacht: 

Das Array von Objekten, die ich zuordnen möchte: 

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

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

Meine Komponente: 

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
}

Was vermisse ich ?

8
user3622460

Sie müssen Ihr Array von Objekten zuordnen und daran denken, dass jedes Element ein Objekt ist, sodass Sie beispielsweise die Punktnotation verwenden, um die Werte des Objekts zu übernehmen.

In Ihrer Komponente

 [
    {
        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>
    );
})

Denken Sie daran, wenn Sie ein Array mit jsx einfügen, hat dies eine andere Bedeutung und Sie können nicht einfach ein Objekt in Ihre Render-Methode einfügen, da Sie ein Array einfügen können. 

Sehen Sie sich meine Antwort an Ein Array zu jsx zuordnen

14
FurkanO

Ich denke, Sie möchten den Namen der Person oder sowohl den Namen als auch die E-Mail-Adresse ausdrucken:

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

oder :

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

@FurkanO hat den richtigen Ansatz gegeben. Für einen saubereren Ansatz (es6-Weg) können Sie so etwas tun

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

Prost!

1
Aakash

versuchen Sie das folgende Snippet

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