Выбор ответа Junior Код-ревью спрашивают часто обновлено
key по индексу
Вопрос
Список задач можно сортировать и удалять из середины, у каждой строки есть поле ввода. Что не так?
{tasks.map((task, i) => (
<li key={i}>
{task.title} <input defaultValue={task.note} />
</li>
))}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: key={i} при перестановке привяжет состояние полей к чужим строкам. React сопоставляет элементы по key.
Варианты ответа
keyдолжен быть строкой, а не числом, иначе React их путает- Ничего: индекс уникален в пределах списка, этого достаточно
key={i}при перестановке привяжет состояние полей к чужим строкамправильный ответkeyнужно ставить на<input>, а не на<li>, чтобы сохранить ввод
Разбор
React сопоставляет элементы по key. При удалении первой задачи все индексы сдвигаются, и состояние неконтролируемого input во второй строке окажется у первой. Нужен стабильный идентификатор из данных. Число как key допустимо. Индекс уникален, но не стабилен, в этом проблема. key ставится на корневой элемент в map.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.