Posso garantire l'ordine di rendering di un array di componenti React?

Question

Ho una matrice di componenti di reazione che sto cercando di eseguire il rendering in un ordine specifico. Qualcosa di simile a questo:

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

Il mio problema è che reagiscono non restituisce il Li nell'ordine della matrice originale (il componente effettivo è più complessa di un singolo li, ma che sia correttamente avvolto in un div).

quindi se stampare le chiavi id di items, ottengo questo:

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

ma il mio Reagire rendono simile a questa:

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

È questo il comportamento previsto? C'è un modo per garantire l'ordine?

Answer 1

Questo comportamento non è previsto. React esegue sempre il rendering di matrici nell'ordine degli elementi.

Se ci sono elementi con valori key in conflitto, verrà visualizzato solo l'ultimo elemento, ma in questo caso non sembra il caso, poiché tutti e quattro gli elementi sono visualizzati.

È possibile che si tratti di una funzione personalizzata .map() che restituisce un oggetto e non un altro array? Gli oggetti verranno renderizzati in ordine di iterazione chiave, che non è necessariamente garantito coerente tra i browser.