ReactがDOM要素を間違った順序でレンダリングするのはなぜですか？

Question

私はReact 16を使って簡単な電子商取引アプリを構築しています。ショッピングカートからアイテムを削除すると、表示されているアイテムの順序は、元の配列にが変更されていないにもかかわらず、に変更されます。また、新しい配列はであり、正しくはと命名されています。鍵が競合していません。また、レンダリングプロセス中に変更されることはありません。ここ

最初の項目から1つの数量を取り除く前カートある：

として：ここ

は、最初のアイテムからの1つの量を除去した後カートありますあなたが見ることができる、アイテムは最後の順序にジャンプします。

ここremoveFromCartコードです：ここでは

export const removeFromCart = item => prevState => { 
    let index = prevState.cart.indexOf(item.key) 

    console.log('cart before removal', prevState.cart) 

    let newCart = [ 
    ...prevState.cart.slice(0, index), 
    ...prevState.cart.slice(index + 1) 
    ] 

    console.log('cart after removal', newCart) 

    return { 
    cart: newCart 
    } 
} 

が私のCartPageコンポーネントです：

function CartPage({ items, onAddOne, onRemoveOne }) { 
    return items.length > 0 ? (
    <ul className="CartPage-items"> 
     {items.map(item => (
     <li key={item.key} className="CartPage-item"> 
      <Item item={item}> 
      <div className="CartItem-controls"> 
       <button 
       onClick={() => onRemoveOne(item)} 
       className="CartItem-removeOne" 
       > 
       &ndash; 
       </button> 
       <span className="CartItem-count">{item.count}</span> 
       <button 
       onClick={() => onAddOne(item)} 
       className="CartItem-addOne" 
       > 
       + 
       </button> 
      </div> 
      </Item> 
     </li> 
    ))} 
    </ul> 
) : (
    <p>Your shopping cart is empty</p> 
) 
} 

完全なコードはhere を見ることができるライブアプリはhere

オープンを見ることができますが、アレイの順序を表示するコンソール。カートに数多くの商品を追加して、一度に数量を削除して問題の再現を確認してください。

Answer 1

私はあなたのソースコードを見ました。私がそれから推論できるのは、Object.keys(itemCounts)を使用しているカートアイテムオブジェクトを作成している間に、itemCountsがjavascriptオブジェクトであるということです。

ここでは、挿入したときと同じ順序でキーを取得しないことに注意してください。あなたがアイテムを注文することにしたい場合は、ここでは代わりに

を配列を使用することができます

はそれが

を役に立てば幸い

How to iterate javascript object properties in the order they were written

Does JavaScript Guarantee Object Property Order?

のためのいくつかの参照リンクがあります