Изменить ключ элемента, не вызывая анимацию, используя response-transition-group

Question

Я создаю пользовательский интерфейс, в котором есть список предметов. Когда пользователь добавляет элемент, он отправляет запрос API для создания нового элемента, но он также добавляет элемент в список с временным идентификатором. Как только API вернется, он заменит идентификатор элемента фактическим идентификатором из бэкэнда. Проблема в том, что, когда я изменяю ключ элемента в списке, response-transition-group будет обрабатывать его как удаление / добавление и запускать анимацию.

Вот мой вопрос: как я могу сказать реагироватьПереходная группа, в которой новый идентификатор принадлежит старому элементу, поэтому обновление не запускается?

Answer 1

Я не очень знаком с response-transition-group, но я сделал переход с другими библиотеками. Я думаю, что вы используете идентификатор в качестве ключа сейчас. Я бы добавил ключевое поле для моего объекта в массиве. Ключ должен быть уникальным. Вы можете сделать его уникальным многократным способом, например, с помощью счетчика или uuid. Мне нравится UUID. Таким образом, если вы измените временный идентификатор на последний, а ключ останется прежним, анимация не будет.

const [items, setItems] = useState([
  { key: uuid(), id:'temporal id', name: 'name' },
  ...
]);

При переходе используйте ключ вместо идентификатора.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >