Значения элементов, смещающиеся и изменяющиеся перед переходом с реагировать-переходной группой

Question

Я заметил такое поведение при использовании пакета react-transition-group в проекте gatsby, над которым я работаю. У меня есть список «тегов», которые добавляются в активный список, когда они выбираются из другого основного списка. Щелчок по тегу из основного списка добавляет его в активный список, а щелчок по тегу из активного списка удаляет его. В значительной степени, как вы ожидаете, что-то подобное будет работать.

Переход в работает просто отлично, но при переходе из теги перестраиваются странным образом. У нас есть пять тегов со следующими значениями:

• Dairy Free
• Вечеринка Food
• Размер семьи
• Низкий уровень холестерина
• Низкий натрий

Если щелкнуть тег Family Sized, чтобы удалить его, произойдет следующее:

1. Family Sized исчезает мгновенно
2. Low Cholesterol и Low Sodium мгновенно сдвигаются влево
3. Последний тег изменяется на Low Sodium мгновенно
4. Последний тег, теперь со значением Low Sodium переходов из

Ожидаемое поведение - тег Family Sized переходит от того места, где он находится в середине группы. Следует отметить, что он работает нормально, если вы удалите тег last из активного списка, это происходит только при удалении тега из любой другой позиции.

Вот замедленный GIF перехода и вот мой код:

<TransitionGroup className='tag-container'>
  {filter.map((tag, index) => {
    return (
      <CSSTransition key={index} timeout={250} classNames={`tag`}>
        <TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
      </CSSTransition>
    )
  })}
</TransitionGroup>

• filter - массив, деструктурированный из состояния компонента.
• Существует <StaticQuery> из gatsby, используемый в том же методе render() компонента, если это имеет значение.
• <TagButton> - это стилизованный компонент из пакета styled-components, а не отдельно импортируемый компонент.

Answer 1

Добавление определенного идентификатора в ваш массив и установка ключа каждого элемента для каждого идентификатора в методе карты решит вашу проблему.

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "react-bootstrap";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";
import uuid from "uuid";

function App() {
  const [items, setitems] = React.useState([
    { id: uuid(), name: "Dairy Free" },
    { id: uuid(), name: "Party Food" },
    { id: uuid(), name: "Family Sized" },
    { id: uuid(), name: "Low Cholesterol" },
    { id: uuid(), name: "Low Sodium" }
  ]);
  const removeitem = item => {
    setitems(items.filter(itemname => itemname.id !== item));
  };
  return (
    <div className="App">
      <TransitionGroup className="todo-list">
        {items.map(data => (
          <CSSTransition timeout={500} classNames="item" key={data.id}>
            <Button className="m-2" onClick={() => removeitem(data.id)}>
              {data.name}
            </Button>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Эта проблема уже решена здесь , поэтому, пожалуйста,проверить, чтобы понять это странное поведение.

Answer 2

Для дальнейшего использования, если кто-нибудь сталкивался с этим. Проблема заключалась в том, как значение key передавалось тегам.

Мой код отображался в массиве filter и назначал index каждого значения в качестве ключей дочерних компонентов. Это означает, что они имеют ключи 0, 1, 2, 3 и т. Д. Когда тег удаляется из массива filter и страница перерисовывается, индексы повторно применяются в любом порядке, в котором находится массив, что означает что все они сдвигаются вместо того, который был удален, будучи "вырванным" из любого места.

Решением было использование уникального ключа, который вообще не зависит от значений индекса массива. Вот что я обновил:

<TransitionGroup className='tag-container'>
  {filter.map((tag) => {
    return (
      <CSSTransition key={`active_${tag}`} timeout={250} classNames={`tag`}>
        <TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
      </CSSTransition>
    )
  })}
</TransitionGroup>