React: Элементы списка с уникальным «ключом» перерисовываются при изменении порядка элементов.

Созданный на 15 июл. 2018 · 3Комментарии · Источник: facebook/react

Вы хотите запросить функцию или сообщить об ошибке ?
Ошибка

Каково текущее поведение?
При рендеринге списка элементов с key установленным в качестве уникального свойства для каждого элемента элемента, если порядок элементов изменяется по сравнению с предыдущим рендерингом, элементы элемента, чьи индексы изменились, визуализируются повторно (создается новый экземпляр) вместо повторного рендеринга. -использование существующего экземпляра (сопоставленного с помощью ключа).

Например, https://codesandbox.io/s/r5p48kzop
Визуализация списка boxes с каждым блоком, имеющим id , top , left & color props. Каждые 750ms мы обновляем значения ( top , left ) для всех элементов внутри массива boxes .

При обновлении, если порядок элементов не меняется, каждое окно анимируется в новое положение. Однако, если мы раскомментируем строку 31, которая перемешивает поля, то только элементы, которые сохраняют свою позицию от предыдущего рендеринга, анимируются в новые позиции.

Вы можете наблюдать это поведение в песочнице. При включенном _shuffle боксы иногда перескакивают на свои новые позиции, а при выключенном _shuffle они всегда анимируются.

Если текущее поведение является ошибкой, пожалуйста, предоставьте шаги для воспроизведения и, если возможно, минимальную демонстрацию проблемы. Вставьте ссылку в свой пример JSFiddle (https://jsfiddle.net/Luktwrdm/) или CodeSandbox (https://codesandbox.io/s/new) ниже:
https://codesandbox.io/s/r5p48kzop

Какое ожидаемое поведение?
Независимо от порядка boxes все элементы блока должны анимироваться в их новые позиции, поскольку для них установлено уникальное свойство key .

Какие версии React и какой браузер / ОС подвержены этой проблеме?
React 16.3.2 & 16.4.1 , Chrome, MacOS.

Источник

dhruvparmar372

Самый полезный комментарий

Привет, @ dhruvparmar372!

Похоже, это ограничение модели DOM. Чтобы продемонстрировать это, я создал этот JSFiddle, который изменяет порядок двух узлов DOM, а затем применяет класс для запуска перехода.

Оказывается, эту проблему можно обойти, запустив перекомпоновку между изменением порядка и обновлением свойств анимации.

Я добавил немного кода в ваш CodeSandbox, чтобы сделать его видимым, когда компонент воссоздается React, изменив <Box /> на компонент класса и создав уникальный идентификатор в конструкторе. Как видите, идентификатор останется неизменным: https://codesandbox.io/s/jn42wvl343

В дополнение к этому я применил обходной путь перекомпоновки к вашему примеру, разделив обновление на два setState s. Первый изменит порядок, затем мы запускаем перекомпоновку, а затем меняем позицию. Кажется, это нормально работает в Chrome, Firefox, Safari и Edge (CodeSandbox не поддерживает IE11, поэтому я не смог протестировать в этом браузере).

philipp-spiess 15 июл. 2018

👍3

Все 3 Комментарий

Привет, @ dhruvparmar372!

philipp-spiess 15 июл. 2018

👍3

привет @ philipp-spiess, спасибо за разъяснение проблемы и примеры обходного пути.

dhruvparmar372 15 июл. 2018

Привет, @ philipp-spiess

У меня такая же проблема со списком сортировки 😔
К сожалению, приведенный выше пример Codesandbox больше не работает (

Вот пример:
https://jsfiddle.net/9odLvbrx/
Он сортирует элементы по щелчку с помощью простого перехода CSS.
Проблема в том, что переход появляется только на выбранном элементе и пропускает остальные.

Я знаю, как обойти проблему (прокомментировано в коде), но она отлично работает только со списками, количество элементов которых никогда не меняется. Так что если я хочу добавить или удалить элемент - все становится невероятно сложным. Как я могу использовать ваше решение для перегрузки перекомпоновки, чтобы это произошло в моем примере?

Заранее спасибо! 😊