Дайте дочерним элементам уникальный атрибут key
Последняя задача показала, как используется метод `map` для динамичного рендеринга нескольких элементов, основываясь на вводе пользователя. Однако в том примере отсутсвовала важная часть. Когда вы создаете массив, атрибут key
каждого из элементов должен иметь уникальное значение. React использует эти ключи для того, чтобы отслеживать какие элементы были добавлены, изменены или удалены. Это помогает сделать процесс повторного рендеринга более эффективным, когда мы изменяем список. Обратите внимание, что ключи должны быть уникальными только среди дочерних элементов, они не обязаны быть глобально уникальными в вашем приложении.
В редакторе кода есть массив с некоторыми интерфейсными фреймворками и функциональный компонент без сохранения состояния
с именем Frameworks()
. Frameworks()
необходимо сопоставить массив с неупорядоченным списком, как и в предыдущем
испытании. Завершите написание обратного вызова карты, чтобы вернуть элемент li
для каждой платформы в массиве
frontEndFrameworks
. На этот раз не забудьте присвоить каждому li
атрибут key
с уникальным значением. Элементы li
также должны содержать текст из frontEndFrameworks
.
Обычно вы хотите сделать ключ чем-то, что однозначно идентифицирует визуализируемый элемент. В крайнем случае можно использовать индекс массива, но обычно следует попытаться использовать уникальную идентификацию.