JSX Karte nur das erste Objekt im array

Ich bin neugierig, wie Sie nur leisten, das erste Objekt in einem array mit .map in JSX.

{this.state.data.map(data =>
    <span className="fooBar">
        <a href={data.foo}>{data.bar}</a>
    </span>
)}

Danke!

InformationsquelleAutor Samantha Ingram | 2016-05-26
  1. 5

    Die einfachste Lösung wäre, einfach nicht verwenden .map an alle!

    <span className="fooBar">
    <a href={this.state.data[0].foo}>{this.state.data[0].bar}</a>
</span>

    .map wird immer über jedes Objekt in einem array - es gibt keine Möglichkeit, zu brechen aus ihm heraus früh.

    • Ist es möglich, ausgeglichen werden? Wie wollen Sie den rest der Daten, eingehüllt in ein anderes div-Element zum Beispiel.
    • Für den rest der Daten, können Sie einfach schneiden Sie das array: this.state.data.slice(1).map(x => ...)
    • Nicht zu arbeiten, noch ist es dieser.Zustand.Daten[0] ist nicht definiert
    • Wenn es eine chance gibt, dass this.state.data[0] werden nicht definiert, Sie behandeln müssen, die in Ihrem code.
    InformationsquelleAutor Joe Clay
  2. 0

    Karte ist so konzipiert, um rufen Sie jedes element in einem array anwenden einer transformation.

    Wenn Sie nur wollen, machen Sie den ersten, dann würde es besser sein, die entweder explizit aufrufen, das erste element dieses.Zustand.Daten[0] oder nutzen Sie die Bibliothek unterstützt eine Methode wie Kopf.

    Lodash Beispiel

    const link = _.head(this.state.data);
<span className="fooBar">
  <a href={link.href}>{link.title}</a>
</span>
    InformationsquelleAutor Tim Reynolds
Schreibe einen Kommentar