React: почему мини приложение работает не правильно?

Question

[thehighhomie]

Добрый день! Разбираюсь с React'ом, написал мини приложение с задачами: https://jsfiddle.net/47tfojLa/
Но почему-то работает не так как нужно, хотя по идее должно работать как надо, а именно:
При нажатии на кнопку удалить задачу, должна удаляться задача, но в действительности удаляется последняя всегда, если даже удаляешь первую. Голову сломал уже с этой ошибкой, кода мало очень и как по мне так все нормально с кодом, но ведет себя приложение не понятно...

Answer 1

[alvvi]

https://jsfiddle.net/47tfojLa/1/
Не используйте индексы в качестве ключей

Comments

[thehighhomie]

а почему? если я не ошибаюсь то даже в доках написано что можно индексы использовать?

[thehighhomie]

мне важно понять это, а то как же я освою. просто где только не видел что так используют в туторах...

[alvvi]

thehighhomie, вы когда удалили задачу из массива, как Virtual DOM определит, какую именно нужно удалить из DOM-a? Правильно, он посмотрит на ключ.

Допустим, удаляем второй таск.

В массиве после удаления у нас какие индексы остались? 0, 1, 2
Сраваниваем: реальный DOM [0,1,2,3] и state [0,1,2]
Очевидно, исчез ключ 3, следовательно из DOM-а удалять будем его.
Удалили второй таск, а исчез элемент с последним индексом

Теперь берем ситуацию когда ключ уникальный
Сравниваем: реальный DOM [id1, id2, id3] и state [id1, id3]
Очевидно, исчез ключ id2, следовательно из DOM-a удалять будем его
Удалили второй таск, он и исчез

[thehighhomie]

Илья Ростопка, ухх, сразу так и не понял, но сейчас буду сидеть и ковырять чтобы точно понять, просто я по этому тутору делеал все https://www.youtube.com/watch?v=Lvd3wQ4hyvI&list=P... у парня все ок работаело, не пойму почему, может потому что версия реакта старее и там такое прокатывало. только я создавал компоненты как нужно в новых версиях и не использовал ref'ы