特定の順序でレンダリングしようとしているreactコンポーネントの配列があります。このようなもの：
render: function() {
var items = stock.map(function(item) {
return <NewLI data={item} key={item.id}/>
}
return <ul>{items}</ul>
}
私の問題は、Reactが元の配列の順序でliを返さないことです（実際のコンポーネントは単一よりも複雑ですが、li適切にラップされていますdiv）。
したがって、のidキーを印刷するとitems、次のようになります。
items.forEach(function(a) { console.log(a.id) })
> 1
> 2
> 3
> 4
しかし、私のReactレンダリングは次のようになります。
<ul>
<li...>2</li>
<li...>3</li>
<li...>4</li>
<li...>1</li>
</ul>
これは予想される動作ですか？注文を保証する方法はありますか？
これは予期された動作ではありません。Reactは、常に要素の順序で配列をレンダリングします。
key値が競合するアイテムがある場合、最新の要素のみがレンダリングされますが、4つの要素すべてがレンダリングされるため、ここではそうではありません。
.map()別の配列ではなく、オブジェクトを返すカスタム関数である可能性はありますか？オブジェクトはキーの反復順序でレンダリングされますが、これは必ずしもブラウザ間で一貫性があるとは限りません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加