Kann ich die Renderreihenfolge eines Arrays von React-Komponenten garantieren?

Question

Ich habe eine Reihe von reagierenden Komponenten, die ich versuche, in einer bestimmten Reihenfolge zu rendern. Etwas wie folgt aus:

render: function() { 
    var items = stock.map(function(item) { 
    return <NewLI data={item} key={item.id}/> 
    } 
    return <ul>{items}</ul> 
} 

Mein Problem ist, dass Reagieren Sie nicht das li in der Reihenfolge der ursprünglichen Anordnung zurückkehrt (die tatsächliche Komponente ist komplexer als ein einzelnes li, aber es ist richtig in einem div verpackt).

so, wenn der Druck der id Schlüssel items, bekomme ich diese:

items.forEach(function(a) { console.log(a.id) }) 
> 1 
> 2 
> 3 
> 4 

aber meine Reaktion sieht wie folgt machen:

<ul> 
    <li...>2</li> 
    <li...>3</li> 
    <li...>4</li> 
    <li...>1</li> 
</ul> 

das erwartete Verhalten ist? Gibt es eine Möglichkeit, die Bestellung zu garantieren?

Answer 1

Dies ist kein erwartetes Verhalten. Reagieren rendert Arrays immer in der Reihenfolge der Elemente.

Wenn Elemente mit widersprüchlichen key Werten vorhanden sind, wird nur das letzte Element gerendert, aber das sieht hier nicht so aus, da alle vier Elemente gerendert werden.

Jede Chance, die eine benutzerdefinierte .map()-Funktion ist, die ein Objekt und kein anderes Array zurückgibt? Objekte werden in Schlüssel-Iterationsreihenfolge gerendert, die nicht unbedingt für alle Browser konsistent garantiert wird.