react-spring：过渡组件问题答案

【问题标题】：react-spring : Transition component issuereact-spring：过渡组件问题
【发布时间】：2020-01-09 22:40:01
【问题描述】：

我正在使用 react-spring，Transition 渲染道具组件。

我面临一个边缘情况，即使在通过 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>

【问题讨论】：

标签： javascript reactjs react-spring

【解决方案1】：

如果您想要更新项目，请确保您的 li 组件的键在更新之间不会更改。所以不要使用密钥：key={item.id + item.riskCategoryId + item.riskCategory} 只需使用key={item.id}

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

如果这能解决您的问题，我不确定是否需要重新设置和唯一。

【讨论】：