ответная пружина: проблема переходного компонента - PullRequest
Новая
       3

ответная пружина: проблема переходного компонента

0 голосов
/ 08 января 2020

Я использую реагирующую пружину, компонент поддержки рендеринга перехода.

Я сталкиваюсь с крайним случаем, когда даже после обновления элементов через 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>

1 Ответ

0 голосов
/ 09 января 2020

Если вы хотите обновить элемент, убедитесь, что ключ вашего компонента li не изменяется между обновлениями. Поэтому вместо использования ключа: key={item.id + item.riskCategoryId + item.riskCategory} просто используйте key={item.id}

И вы также можете добавить свойство перехода к вашему переходу, например: leave={{ transform: 'translate3d(0, 40px, 0)', opacity: 0 }}

И если это решит ваш проблема, я не уверен, необходим ли reaset и unique.

...