为什么 React 以错误的顺序渲染我的 DOM 元素？答案

【问题标题】：Why is React rendering my DOM elements in the wrong order?为什么 React 以错误的顺序渲染我的 DOM 元素？
【发布时间】：2019-12-16 08:46:05
【问题描述】：

我正在使用 React 16 构建一个简单的电子商务应用程序。当我从购物车中删除商品时，显示的商品顺序会发生变化即使原始数组没有发生变化。并且新数组也是正确排序的。也没有冲突的键。它们在渲染过程中也不会改变。

这是购物车在从第一项中删除一个数量之前：

这是购物车在从第一项中删除一个数量后：

如您所见，商品跳转到最后一个订单。

这里是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

打开控制台查看数组顺序。请将一堆物品添加到购物车并尝试同时删除一个数量以查看问题是否重现。

【问题讨论】：

标签： reactjs sorting rendering

【解决方案1】：

我刚刚看了你的源代码。我可以从中推断出，当您创建购物车项目对象时，您正在使用Object.keys(itemCounts)，其中itemCounts 是一个javascript 对象。

请注意，您获得钥匙的顺序与插入钥匙的顺序不同。如果你想订购商品，你可以使用数组来代替

这里有一些参考链接供您参考

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

Does JavaScript Guarantee Object Property Order?

希望对你有帮助

【讨论】：

【解决方案2】：

键是 React 唯一用来识别 DOM 元素的东西。因为您使用索引值作为键你必须找到它所在的项目的具体索引，然后你修改它，最后以相同的顺序运回状态。否则您的产品将按错误的顺序显示。

【讨论】：