Javascript 反应：重新排序列表导致不需要的转换

我有一个在React中实现的东西列表，可以通过几个按钮来重新排序，以便上下移动

我遇到的问题是，因为我有一个使用CSS实现的切换组件，并且在状态之间有转换，当我更改具有不同切换状态的两行之间的顺序时，我会看到我只想看到的转换，然后单击切换，而不是在重新排序时

这里是一个更好的解释问题的gif

我知道这就是React的工作原理，它只是渲染和更改差异，这就是为什么它只是更改属性，这就是我看到转换发生的方式

我的问题是，有没有办法避免这种情况

---

编辑：解决方案是正确的。虽然我使用的是key属性，但它的值是数组的索引。这使React-an无法确定正确的元素。

请确保为列表中的每个元素设置了

键
属性

这将使react能够重用现有的DOM元素，而不是重新呈现它们，这将解决您的问题。它还应该提高过程中的性能


[…]React支持
键
属性。当孩子们有钥匙时，他们会使用钥匙
将原始树中的子级与
后续树

确保为列表中的每个元素设置了
键
属性

这将使react能够重用现有的DOM元素，而不是重新呈现它们，这将解决您的问题。它还应该提高过程中的性能


[…]React支持
键
属性。当孩子们有钥匙时，他们会使用钥匙
将原始树中的子级与
后续树

要添加更多信息，我使用索引作为键，因此在识别正确的元素时会产生混淆。要添加更多信息，我使用索引作为键，因此，在识别正确的元素时，您使用了什么来代替键值的数组索引？在本例中，我使用了数据库中记录的ID，但如果您还没有ID，则可以使用随机生成的ID。您使用了什么来代替键值的数组索引？在本例中，我使用了数据库中记录的ID，但如果您还没有ID，则可以使用随机生成的ID。