Списки и ключи в React для начинающих: map(), key и баг с индексами — React в эпоху ИИ (Эпизод 5)

React: списки и ключи — объяснение для начинающих, как это необходимо в эпоху ИИ. Двадцать раз повторять один и тот же элемент списка вручную — это неэффективно, поэтому в этом эпизоде ​​мы преобразуем наши карточки и уроки в массивы и отображаем их с помощью map. Затем мы сталкиваемся со знаменитым предупреждением "уникальное свойство ключа", выясняем, что такое ключ на самом деле, и воспроизводим ошибку, когда отмеченный флажок переходит к другому уроку, без каких-либо ошибок. Затем мы просим Клода создать для нас список и проверить его код, включая один тест, где мы намеренно его ломаем. Это 5-й эпизод курса "React в эпоху ИИ" — полный курс по React с нуля. В этом эпизоде: ✅ Почему написание каждого элемента списка вручную не масштабируется ✅ Массивы и map() простыми словами (кухня: заказы принимаются, тарелки выдаются) ✅ Рендеринг компонентов из массива с помощью map ✅ Предупреждение: каждый дочерний элемент списка должен иметь уникальное свойство "key" ✅ Что такое ключ на самом деле (билет в гардероб) и куда он должен помещаться ✅ Исчезающие карточки: фигурные скобки без оператора return ✅ Списки с реальными идентификаторами и что происходит с двумя уроками, имеющими один и тот же идентификатор ✅ filter() + map() для отображения только некоторых элементов ✅ Ловушка индекса в действии: key={index} заставляет галочку флажка перескакивать на неправильный урок ✅ Когда индекс в порядке и почему ваши данные должны иметь идентификатор ✅ Спрашивай, читай, проверяй: реальный ответ Клода, который использует ключ id И хранит галочки по id, поэтому он сохраняется, даже если мы намеренно нарушаем ключ Каждая ошибка и ответ ИИ в этом видео Реальные требования: Node.js 24.22.1, Vite 8.3.5, React 19.3.1. Вам понадобятся только эпизоды с 1 по 4. ⏱️ Разделы 0:00 Начало: галочка, которая перескочила 0:49 Добро пожаловать обратно 1:38 Двадцать уроков вручную 2:36 Массивы за две минуты 3:23 map: один элемент на входе, один элемент на выходе 4:29 Почему map, а не цикл? 5:26 Карточки в виде массива 6:16 Отображение карточек с помощью map 7:09 Медленное чтение строки map 8:11 Предупреждение о ключе 9:17 Добавление ключа 10:04 Куда помещается ключ 10:49 Исчезнувшие карточки 11:41 Уроки как данные 12:33 map с реальным ключом id 13:14 Два урока, один id 14:23 Отображение только некоторых элементов 15:08 Индекс: заманчивый ключ 15:53 ​​Тест флажка с индексом 16:49 Почему галочка переместилась 18:07 Тот же тест с id 18:45 Когда индекс в порядке? 19:29 Правила списка на одной карточке 20:03 Вопрос: реальная подсказка 21:09 Чтение: массив и ключ 21:57 Чтение: часть, которую мы еще не изучили 23:02 Проверка 1: работает ли это? 23:29 Проверка 2: прыгающая галочка 23:48 Проверка 3: два уровня безопасности 24:38 Проверка 4: никогда не используйте один и тот же идентификатор повторно 24:58 Что мы узнали от ИИ 25:23 Ваше мини-задание 25:51 Следующий эпизод ▶️ Предыдущий эпизод: Реквизит ▶️ Следующий эпизод: Условный рендеринг 🧩 Ваше задание Откройте файл Reviews.jsx. В нем есть две цитаты, написанные от руки. Превратите их в массив объектов с идентификатором, цитатой и именем, отобразите их с помощью map, используя идентификатор в качестве ключа, затем добавьте третий отзыв с одной новой строкой данных. Консоль должна оставаться чистой. Опубликуйте свой файл Reviews.jsx в комментариях 👇 #react #reactjs #reacttutorial