Индекс массива в качестве ключа списка и удаление строки
Реестр задач рендерится так:
{tasks.map((task, index) => (
<TaskRow key={index} task={task} />
))}
В каждой строке есть неуправляемое поле для комментария. Пользователь пишет комментарий в третьей строке, а затем удаляет первую задачу. Что произойдёт?
- Ничего необычного: индекс уникален внутри списка, а значит подходит на роль ключа не хуже идентификатора записи.
- Введённый текст окажется не в той строке: после удаления индексы сдвинулись, и состояние строк съехало вместе с ними.
- Все поля просто очистятся: список целиком пересоздаётся при любом изменении массива.
- Появится предупреждение о дублирующихся ключах, и список не обновится до перезагрузки страницы.