Ich habe eine Methode in einer Komponente der Reaktionskontaktliste, in der ich eine andere Komponente zurückgebe. Ich habe es zum Laufen gebracht, bin aber gespannt, ob es einen besseren Weg gibt, um zu strukturieren, wie ich den Schlüssel verwende.

Speziell - Ich frage nach dieser Codezeile aus der folgenden Methode (Daten sind als Beispiel für den Anfang hartcodiert):

return <ShortContact contact={contact} key={contact.id}/>

Hier steht der Code im Kontext:

_getContacts() {
    let contactList = [
        {
            id: 1,
            fName: "aaa",
            lName: "aaaaa",
            imgUrl: "http://brainstorminonline.com/wp-content/uploads/2011/12/blah.jpg",
            email: "[email protected]",
            phone: "999999999999"
        },
        {
            id: 2,
            fName: "bbbbb",
            lName: "bbbbbbb",
            imgUrl: "https://media.licdn.com/mpr/mpr/shrinknp_200_200/bbb.jpg",
            email: "[email protected]",
            phone: "888888888888"
        },
        {
            id: 3,
            fName: "Number",
            lName: "Three",
            imgUrl: "http://3.bp.blogspot.com/-iYgp2G1mD4o/TssPyGjJ4bI/AAAAAAAAGl0/UoweTTF1-3U/s1600/Number+3+Coloring+Pages+14.gif",
            email: "[email protected]",
            phone: "333-333-3333"
        }
    ];

    return contactList.map((contact) => {
        "use strict";
        return <ShortContact contact={contact} key={contact.id}/>
    });
}

ShortContact Component Render:

class ShortContact extends React.Component {
    render() {
        return (
            <div >
                <li className="contact-short well whiteBG">
                    <img  className="contact-short-thumb" src={this.props.contact.imgUrl}/>
                    <p className="contact-short-name">{this.props.contact.fName}</p><br />
                    <p className="contact-short-email">{this.props.contact.email}</p>
                </li>
            </div>
        );
    }
}

Ich kämpfte damit, wie es funktioniert und bekomme nicht die WarnungWarning: Each child in an array or iterator should have a unique "key" prop. Allerdings frage ich mich, ob die Syntax oder Struktur gültig ist und ob sie überarbeitet werden sollte.