No video :(

Что передать в key если нет Id? Создать Id!

Подписаться 11 тыс.

Просмотров 3,7 тыс.

50% 1

Ситуация когда нужно отрисовать список, но подходящего id нет, часто ставит в ступор даже опытных разработчиков. В этом примере я покажу как решить эту проблему)
Подписывайтесь на мой telegram канал: t.me/cleanfron...
Исходники из видео: codesandbox.io...

Опубликовано:

5 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@uszakow Год назад

Если нет id, то надо создать id) На самом деле гениально! Надо запомнить на будущее.

@art7653 Год назад

Посмотрел много твоих видео, контент нормальный, хотелось бы больше продвинутого, по примеру: продвинутый typescript (не только про ts,а видео более продвинутых уровней). Также, когда пишешь код,или объясняешь,хотелось бы видеть код лучше(т.к. иногда приходится смотреть на телефоне), можно зумить его. Также, возможно стоит выбирать более кликбейтные названия,чтобы ютуб продвигал,можно с помощью чат gpt генерировать множество вариантов на основе описания,а там уже самому отфильтровать. Удачи 🔥

@paromovevg Год назад

Продвинутый typescript точно будет, если ещё что-то продвинутое нужно, пишите Чем конкретнее запрос - тем лучше результат) Постараюсь сделать код побольше

@art7653 Год назад

@@paromovevg Привет, из тем: Render Props,Function as Children. Случаи их использования. Еще, возможно, по NEXT видосы с фундаменталкой. Может о микрофронтах, сode splitting)

@user-tk7qv9rv2c 17 дней назад

Спасибо, сама также использовала и случайно наткнулась на доку nanoid, там так и написано: не использовать для key при рендере, хотя такой вариант преподносят некоторые статьи и тд

@user-qf3zt5mm2h Год назад

недавно в работе была похожая ситуация, требовалось использовать react-hook-form и там есть хук useFieldArray, указал в key i ( вместо предлагаемого id внутри элемента массива ), и не мог решить эту задачу некоторое время, этот ролик мне бы пригодился сейчас, но надеюсь у других разработчиков за счет этого ролика не будет глупых ситуаций как у меня)

@sergeyf466 Год назад

с nanoId - прикольній кейс, не знал, спасибо!

@_oxios_ Год назад

Крутое объяснение, спасибо!

@pika4u380 Год назад

Лайк не глядя) Не успел пролистать тг канал полностью и поэтому не знаю. Как там продолжение курса по реакт? Я уже дошёл до онгоинга так сказать)

@paromovevg Год назад

Курс на паузе, продолжу после челленджа с лучшим качеством

@pika4u380 Год назад

@@paromovevg понял, спасибо

@dihaneeer Год назад

Не ну это однозначно лайк!

@alexandershcheglov4653 Год назад

Спасибо за такую полезность, очень может пригодится у меня на проекте. А как относитесь к генерации и сохранению id в redux?

@ArtyemSavchenko-rus Год назад

отличный урок, тоже одно время генерил айдишники генератором )) позанудствую, может кому полезно будет. handleSave правильно писать через вызов setStrings с колбэком, а там уже предыдущий массив клонировать, изменять и возвращать. ну и там уже поиск с индекса на айди надо не забыть переписать.

@dimape.4180 Год назад

в конце угарнул))))

@fergussawyer Год назад

Красава, годный контент

@user-tl9go9ly3e 12 дней назад

А что если есть массив условно из более 500 айтемов без id?

@user-gg8gt7jk8l Год назад

remove короче и предпочтительнее же через filter делать. А еще видел делают в качестве key - value.toString() - это норм ?

@paromovevg Год назад

По поводу remove вкусовщина, ни на что не влияет на самом деле. По поводу value.toString() - часто стреляет в ногу, так как не никаких гарантий, что не появился двух элементов с одним значением. В этому случае вообще нельзя так как key вводится пользователем, и совпадения key обязательны

@user-gg8gt7jk8l Год назад

@@paromovevg понял) просто splice считается мутирующим методом и приходится сначала делать копию, а filter новый массив сразу вернет

@paromovevg Год назад

Ждем toSpliced

@frusen_sol Год назад

есть нативный реактовский хук *useId*

@Unbeliever1806 Год назад

Нет, он предназначен только для генерации id в html

@JdSpot Год назад

Чзх

@user-yq2mj6mq3e Год назад

Офигеть, курсы уже делают младенцы.

@shittywizzard5727 Год назад

привет, нет желания рассмотреть Next-auth? Прикольная либа,, новичкам может быть полезной

@LueKedowsky Год назад

Вариант с псевдорандомными айдишниками: Date.now() + Math.floor(Math.random() *100) Главное, чтобы боги рандома не выдали вам одинаковые числа при одновременной генерации)))

@paromovevg Год назад

Я бы на это не рассчитывал)

@lesters Год назад

привет, подскажи что лучше использовать ,если нужно получать и отправлять данные в mysql

@paromovevg Год назад

Привет! Посмотри в сторону www.prisma.io/ Одна из самых сейчас приятных orm. Если база уже существует тебе просто нужно к ней подключиться, то рассмотри квери билдеры knexjs.org/ А вообще технически лучше всего просто под это сервер сделать но можно из next.js api routes обращаться

@lesters Год назад

@@paromovevg я так понимаю призма должна быть на сервере, как мне сказали в моем варианте бек на пхп. А в задаче указано что Указываемое количество данных в интерфейсе может быть очень большим (более 1трлн) и может превышать размер доступной памяти для php. Мне нужно по факту сетить и проводить разные вычисления с данными перед отправкой (по типу среднее значение, большее меньшее и тд в районе 8 позиций) и сетить и обрабатывать данные не больше чем каждую 1 секунду и слать в базу и на отдельной странице по клику виводить статические данные из этой же базы. Звучит как-то масштабно для бекенда на пхп. Я тут слегка в ступоре как это организовать

@lesters Год назад

у меня была идея с аксиосом, который получает данные из файла пхп в котором уже написана логика запросов с базы и второй такой же пхп файл для аксиоса только для сетинга данных в базу