反应弹簧:过渡组件问题

Question

我正在使用反应弹簧，过渡渲染道具组件。

我面临着一个边缘情况，即使在通过 setState(( 更新项目之后，组件中使用的项目也会显示旧值并向其附加新值。

我期待一种行为，即项目应该重新呈现过渡组件中的项目列表。

知道我可能错过了什么吗？

<ul>
<Transition
items={randomFeeds}
// keys={randomFeeds.map(item  => item.id)}
keys={randomFeeds => randomFeeds.id}
from={{ transform: 'translate3d(0, -40px, 0)', opacity: 0 }}
enter={{ transform: 'translate3d(0,0,0)', opacity: 1 }}
update={{ transform: 'translate3d(0,0,0)', opacity: 1 }}
reset={true}
unique={true}
>
{item => props => (
<li style={props} key={item.id + item.riskCategoryId + item.riskCategory}>
<RimeCard
key={item.id + item.riskCategoryId + item.riskCategory}
title={item.title}
categoryId={item.riskCategoryId}
category={item.riskCategory}
link={item.link}
isTimeline={true}
date={item.publishDateString}
/>
</li>
)}
</Transition>
</ul>

Answer 1

如果你想要一个项目更新，那么请确保你的li组件的键在更新之间没有改变。因此，与其使用键：key={item.id + item.riskCategoryId + item.riskCategory}只需使用key={item.id}

您可能还希望将 leave 属性添加到您的过渡中，例如：leave={{ transform: 'translate3d(0, 40px, 0)', opacity: 0 }}

如果这解决了您的问题，我不确定是否需要重置和独特。