Czy mogę zagwarantować kolejność renderowania tablicy komponentów React?

Question

Mam szereg składników reakcji, które próbuję renderować w określonej kolejności. Coś takiego:

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

Moim problemem jest to, że React nie wraca Li w kolejności oryginalnej tablicy (rzeczywisty składnik jest bardziej skomplikowane niż jednym li, ale jest prawidłowo opakowane w div).

więc jeśli druk na id klucze items, otrzymuję to:

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

ale mój React renderowanie wygląda następująco:

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

Jest to oczekiwane zachowanie? Czy istnieje sposób na zagwarantowanie zamówienia?

Answer 1

To nieoczekiwane zachowanie. React zawsze renderuje tablice w porządku elementów.

Jeśli istnieją elementy o sprzecznych wartościach key, tylko ostatni element zostanie wyrenderowany, ale nie wygląda to tak, jak tutaj, ponieważ wszystkie cztery elementy są renderowane.

Czy istnieje szansa, że ​​niestandardowa funkcja .map() zwraca obiekt, a nie inną tablicę? Obiekty będą renderowane w kolejności iteracji kluczy, co niekoniecznie gwarantuje spójność w różnych przeglądarkach.