react-spring：過渡組件問題

Question

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

我面臨一個邊緣情況，即使在通過 setState() 更新項目之后，組件中使用的項目也會顯示舊值並向其附加新值。

我期待一種行為，其中項目應該重新呈現 Transition 組件中的項目列表。

知道我可能會錯過什么嗎？

<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 屬性添加到您的 Transition 中，例如： leave={{ transform: 'translate3d(0, 40px, 0)', opacity: 0 }}

如果這解決了您的問題，我不確定是否需要重新設置和獨特。