Всем привет, расскажу свою ситуацию: Шаг 1:https://prnt.sc/vq2g9e Здесь я просто демонстрирую свое

приложение (пилю на реакте, само собой). Здесь можно добавлять или удалять ряд или столбец. Для того, чтобы удалить нужно навести на таблицу и появятся кнопки удаления

Шаг 2: https://prnt.sc/vq2hau
Выбираем необходимый нам столбец и удаляем его.

Шаг 3: https://prnt.sc/vq2m0a
Вроде бы все хорошо и работает так как нужно, 4-ый столбец удален. Но все это только на уровне отображаемых данных, но не на уровне дом элементов, сейчас продемонстрирую.

Шаг 1:https://prnt.sc/vq2jjh
Запускаем приложение заново и помечаем через девтулзы 4 столбец, который мы удаляем и 6-ой. Для его 6-ой станет понятно позже.

Шаг 2:https://prnt.sc/vq2k1t
После нажатия кнопки удаления можно увидеть, что если взять в контексте отображаемых данных удалился 4-ый столбец. Но в контексте ДОМ-элементов удаляется последний столбец, а свойства удаленного по данным столбца перешли к следующему столбцу.

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

Но вот другие тесты, которые я провел, показали, что не все в порядке с ДОМ-элементами.

Это мой баг или фича виртуального дом-дерева?)

а key наверное === index?

Да, но я пробовал модифицировать key. Создавал разные уникальные комбинации, но на результат это не повлияло. В консоле никаких ошибок не выдает.

Не уникальные ключи в мапе

key был действительно недостаточно уникальный, при другой генерации ключей, все работает адекватно

Он не вам а про свою проблему и как вы успели заметить за последние две минуты, траблы с неуникальными ключами довольно частый источник багов😏

Проблема в том, что я не могу использовать сторонние библиотеки, но вроде бы у меня получилось сделать уникальный key. Я просто складываю значение с индексов, вроде все работает адекватно)

export const nanoid = (t = 21) => { let e = '' const r = crypto.getRandomValues(new Uint8Array(t)) for (; t--; ) { const n = 63 & r[t] if (n < 36) { e += n.toString(36) } else if (n < 62) { e += (n - 26).toString(36).toUpperCase() } else if (n < 63) { e += '_' } else { e += '-' } } return e }

crypto это же нодовская либа?

брозер API