反应弹簧中的重复键

Question

我使用 react-spring 为我通过 map 函数显示的列表设置动画，但我注意到即使我为每一行都有一个唯一的 ID，它仍然会给出错误，即 React 有两个问题拥有相同钥匙的孩子。

键是： {key: item => item.order.id}

我的问题是如何解决这个问题？我试图在网上找到答案，但我找不到任何有用的东西，所以我现在找到了解决方案。

Answer 1

我发现反应弹簧加载同一行 2 次（一个正在退出，同一行加载到另一行），所以我曾经得到错误。就我而言，新行的状态不同，所以我只是混合 ID 和状态来构建密钥，问题就解决了。

{key: item => item.order.id + item.order.status}

队列中仍然存在旧行，但不透明度和高度更改为 0，没有人可以看到。这就是出现错误的原因