项目在转换过程中被打乱，无法使用转换

Question

我正在尝试使用react springuseTransition钩子在项目数组和同一数组的扩展版本之间切换。展开时过渡看起来不错，但向后过渡时，项目会被打乱。具体来说，旧列表中的最后一个项目在转换出去时会移动到第一个位置。我该如何防止这种情况发生？我尝试了">重置"；以及">唯一"；选项，修改原始数组而不是在两个数组之间切换，但似乎没有任何帮助。

我在React Spring上发现了一个类似的问题，useTransition打乱了我的列表项目；解决方案"；沙盒坏了。此外，仅仅迁移到新版本对我来说并不是一个解决方案

下面是一个最简单的例子来说明这个问题：https://codesandbox.io/s/recursing-aryabhata-8u2ri

Answer 1

您的问题非常令人沮丧，因为它应该可以工作，而且它是一个简单的例子。我现在想不出一个简单的解决办法。这一定和钥匙有关。

但它适用于我的新版本。例如，如果更改为9.0.0-beta.1。

您也可以尝试最新的9.0.0-rc.3版本。我期待着新的9版本。转换已完全重构。

您可以在此处阅读有关更改的信息：https://aleclarson.github.io/react-spring/v9/#The-使用过渡返工

你的例子是这样的9.0.0-rc.3:

const itemsA = ["a", "b", "c"];
const itemsB = ["d", "e", "f"];
export default function App() {
const [expanded, setExpanded] = useState(false);
const items = expanded ? [...itemsA, ...itemsB] : [...itemsA];
const transition = useTransition(items, {
from: { opacity: 0, transform: "translate3d(100%,0,0)" },
enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
leave: { opacity: 0, transform: "translate3d(50%,0,0)" },
keys: p => p
});
return (
<div className="simple-trans-main" onClick={() => setExpanded(!expanded)}>
{transition((style, item, t, i) => (
<animated.div style={style}>
<h1>{item}</h1>
</animated.div>
))}
</div>
);
}

https://codesandbox.io/s/basic-transition-with-v9-react-spring-ojp4w