Я именно интересуюсь в чем вообще смысл этого "уникального" key, который меняется каждый рендер. Получается нет смысла или я что-то не понимаю
если ты мапаешь массив, то реакт не будет различать эти элементы, для него они будут одинаковые, если не передать key. Поэтому при изменении списка, он будет перерендериваться полностью
Ura
🦜
Я именно интересуюсь в чем вообще смысл этого "уникального" key, который меняется каждый рендер. Получается нет смысла или я что-то не понимаю
key должен основываться на неменяющихся данных в течении времени
Тимофей 🛴
Я именно интересуюсь в чем вообще смысл этого "уникального" key, который меняется каждый рендер. Получается нет смысла или я что-то не понимаю
Можно генерить key, но только в момент появления данных, а не каждый рендер
Denis 🇺🇦
если ты мапаешь массив, то реакт не будет различать эти элементы, для него они будут одинаковые, если не передать key. Поэтому при изменении списка, он будет перерендериваться полностью
Вот смотри, два варика:
1) Мы не передаем key prop
2) Мы передаем key prop
В первом случае, если реакт будет каждый раз апдейтить содержимое каждого элемента листа, потому что будет думать что один и тот же лист айтем, но просто поменялся.
Второй случай разделяется на 2 варианта:
1) Если key генериться каждый ререндер, то ситуация будет даже хуже, чем когда мы не передаем key prop, насколько я понимаю, потому что реакт будет думать что при каждом ререндере у нас будет новый элемент и будет анмаунтить и маунтить заного каждый лист айтем.
2) Если key будет одним и тем же каждый ререндер, то все будет ок, будут использоваться каждый раз существующие инстансы дом элементов, допустим, при реордере
Китикет
Denis 🇺🇦
Можно генерить key, но только в момент появления данных, а не каждый рендер
Да, тоже щас подумал над этой гениальной мыслью :D
Yury
Ну зайди в доку и копипастни мне из нее ответ на этот вопрос
https://reactjs.org/docs/reconciliation.html#recursing-on-children
Denis 🇺🇦
Ладно молодцы
Китикет
Здесь правда не сказано прямым текстом что нельзя в рендере их генерировать, но это должно быть понятно и отсюда
Oleg
Тимофей 🛴
Oleg
Вынести в отдельный useEffect и передать deps когда он должен вызываться
То есть в другом месте его вызывать просто и пусты []?
Тимофей 🛴
То есть в другом месте его вызывать просто и пусты []?
Ну если его запуск ни от чего не зависит то да с пустым
Evgeny
Все привет!) кто нибудь писал расширения для браузера ?)
Marat
У меня есть столбик с карточками товаров, и форма по добавлению карточки. У каждой карточки есть уникальный ID. При добавлении встал вопрос, как сгенерировать там ID, который до этого не использовался?
Vladimir
Все привет!) кто нибудь писал расширения для браузера ?)
кто-нибудь писал. Давай более конкретный вопрос
Китикет
У меня есть столбик с карточками товаров, и форма по добавлению карточки. У каждой карточки есть уникальный ID. При добавлении встал вопрос, как сгенерировать там ID, который до этого не использовался?
Ну во-первых, обычно это делает сервер и либо юзает всякие uuid, либо бд автоматом генерирует
Marat
Ну во-первых, обычно это делает сервер и либо юзает всякие uuid, либо бд автоматом генерирует
я пытался юзать uniqueId от lodash, но он не умеет принимать массив с занятыми цифрами, думал мжт есть. Спасибо
Китикет
Китикет
я пытался юзать uniqueId от lodash, но он не умеет принимать массив с занятыми цифрами, думал мжт есть. Спасибо
Там и не нужен массив с занятыми цифрами, надо просто каким-нибудь nanoid генерировать уникальный ключ, либо если все-таки числом, то надо брать последний элемент и добавлять 1 к его айдишнику
Vladimir
я пытался юзать uniqueId от lodash, но он не умеет принимать массив с занятыми цифрами, думал мжт есть. Спасибо
вероятность коллизии крайне мала (с)
Китикет
Так эта штука в лодаше вообще 3 значное число генерирует, судя по доке? Интересный uniqueId)
Marat
вероятность коллизии крайне мала (с)
Он генерит не рандом, а начинает с единицы, колизия сразу наступает, и карточки начинают кидать дуель друг другу
Китикет
Он генерит не рандом, а начинает с единицы, колизия сразу наступает, и карточки начинают кидать дуель друг другу
Так бери норм пакет, nanoid например
Marat
Все парни, спасибо, я понял чё делать)
Artem
Всем привет, сейчас посмотрел видео про withRouter и такой вопрос, в чем разница между NavLink и history.push(...)?
Andrew
Всем привет, сейчас посмотрел видео про withRouter и такой вопрос, в чем разница между NavLink и history.push(...)?
первая ссылка в гугле же: https://stackoverflow.com/questions/51116747/react-router-link-vs-redirect-vs-history
Artem
Это link а не NavLink
Andrew
https://reacttraining.com/react-router/web/api/NavLink
они отличаются только пропсами для стилизации, функционал тот же
Evgeny
они отличаются только пропсами для стилизации, функционал тот же
ну я по этому и скинул ссылку=)
Kirill
Добрый день, товарищи! Хочу сделать "красивый" запрос на отправку уведомлений и геолокации. Я уверен, что многие из Вас видели такое решение уже. Например, когда пользователь кликает на "Уведомлять меня....", фон темнеет на 90%, и появляются рисованные стрелки, что мол тут щас выскочит уведомление, не пугайтесь его, а нажмите принять, и тп. Кто-нибудь может подсказать, как такой пожход называется и где можно посмотреть хтотя бы картинку.
Спасибо!
Alexander
Kirill
1) Хотя бы картинку, как это выглядит. Думал, может у кого есть под рукой. 2) С Анимацией никогда не работал. Буду рад попробовать. Спасибо за наводку. 3) Хотелось услышать мнение других людей о моей проблемме. Это очень помогает.
su
Привет всем! Возможно ли из react spa сделать react ssr на node.js, и насколько это будет затратно?
Ilya
Добрый день, товарищи! Хочу сделать "красивый" запрос на отправку уведомлений и геолокации. Я уверен, что многие из Вас видели такое решение уже. Например, когда пользователь кликает на "Уведомлять меня....", фон темнеет на 90%, и появляются рисованные стрелки, что мол тут щас выскочит уведомление, не пугайтесь его, а нажмите принять, и тп. Кто-нибудь может подсказать, как такой пожход называется и где можно посмотреть хтотя бы картинку.
Спасибо!
гуглим скорее всего в сторону вообще решений для построения step-by-step guides или tour
вообщем смотрим в гугле по запросу "React Step-by-step tour"
н/п https://react-joyride.com/ или https://reactour.js.org/
Эти решения используются вообщем для построения гайдов по интерфейсу - их же можно использовать и в тех случая х когда требуется обратить внимание пользователя на область или какой-то конкретный элемент... я думаю вы что-то такое и хотели.
🦜
Подскажите по такому кейсу.
Есть страница, при переходе на нее с другой, идет запрос на получение данных в хуке.
useEffect(() => get(), [])
добавляю проверку на то, что данные уже есть, чтобы при переходах не было запросов.
+ useEffect(() => {
if(data) return;
get()
},[])
Вопрос, как мне обновить данные, при переходе, потому что они могут устареть?
Я думал типо добавить Update Button. Но нет.
Dmitriy
Подскажите по такому кейсу.
Есть страница, при переходе на нее с другой, идет запрос на получение данных в хуке.
useEffect(() => get(), [])
добавляю проверку на то, что данные уже есть, чтобы при переходах не было запросов.
+ useEffect(() => {
if(data) return;
get()
},[])
Вопрос, как мне обновить данные, при переходе, потому что они могут устареть?
Я думал типо добавить Update Button. Но нет.
так а как ты можешь узнать устарели ли данные не сделав сетевого запроса?
su
Спасибо!
🦜
так а как ты можешь узнать устарели ли данные не сделав сетевого запроса?
Я решаю кейс, когда часто меняют страницу и чтобы не делался запрос. Но когда пройдет время и смениться страница, то запрос пройде
Юрий
где нужно держать файлы в которых, функции которые достают, сетят файлы в localStorage, интерсепторы (обработчики request, responce), файл в котором достается history?
Dmitriy
🦜
ну видимо new date чекать?)
хз, я и спрашиваю, как тут решают такое. Потому что данные могут обновиться на беке, но на фронте будет неактуальный store
🦜
???
Dmitriy
хз, я и спрашиваю, как тут решают такое. Потому что данные могут обновиться на беке, но на фронте будет неактуальный store
тю, перечитай мой вопрос. Только рил тайм коннект аля лонг пул или сокет
Yury
Подскажите по такому кейсу.
Есть страница, при переходе на нее с другой, идет запрос на получение данных в хуке.
useEffect(() => get(), [])
добавляю проверку на то, что данные уже есть, чтобы при переходах не было запросов.
+ useEffect(() => {
if(data) return;
get()
},[])
Вопрос, как мне обновить данные, при переходе, потому что они могут устареть?
Я думал типо добавить Update Button. Но нет.
1) если есть сокеты на проекте уже - можно заюзать
2) делали как-то подобное, раз в 5 минут на сервак отправлял запрос на получение кол-ва, сравнивал с тем что имею, если разное - то перезапрашивал, если нет - работал со старым стором
Ilya
Подскажите по такому кейсу.
Есть страница, при переходе на нее с другой, идет запрос на получение данных в хуке.
useEffect(() => get(), [])
добавляю проверку на то, что данные уже есть, чтобы при переходах не было запросов.
+ useEffect(() => {
if(data) return;
get()
},[])
Вопрос, как мне обновить данные, при переходе, потому что они могут устареть?
Я думал типо добавить Update Button. Но нет.
при переходе (unmount) - дропать их (данные) в состоянии - чтобы при возврате - запросить их вновь.
🦜
Yury
1) если есть сокеты на проекте уже - можно заюзать
2) делали как-то подобное, раз в 5 минут на сервак отправлял запрос на получение кол-ва, сравнивал с тем что имею, если разное - то перезапрашивал, если нет - работал со старым стором
но у нас кейс был именно с одной определенной сущностью - поэтому решение подошло. чисто по базе чувак на бэке брал кол-во записей
Yury
при переходе (unmount) - дропать их (данные) в состоянии - чтобы при возврате - запросить их вновь.
профит только при переходе между 2-мя страницами ?
Ilya
Ну на самомо деле есть много подходов к решению этой задачки
Обычно таковые возникают в интерфейсах подразумевающих concurency changes (aka совместное редактирование в google tables) но это ИМХО немного другой случай.
Ilya
Обычно таковые возникают в интерфейсах подразумевающих concurency changes (aka совместное редактирование в google tables) но это ИМХО немного другой случай.
тогда можно крутить и вебсокеты с keep-alive - или как это делается на тех же googel docs - синхронный сброс единому арбитру на слияние, есть подходы и с обогащением и решением конфликтов на клиенте.
Но в общем случае - реализация такой логики, как говорится "игра не стоит свечь", перезагружать данные целиком или порционно - выходит "дешевле", намного.
Maxim
Yury
А если количество одинаковое но контент уже обновился?
как правило в списках ты выводишь фото/название/еще что-нить - подробная инфа уже внутри страницы, где и будут актуальные данные
Андрей
Хелло. Может кто сталкивался с такой фичей у Formik?
Почему при submit формы она два раза отправляется? Форму отправляю кнопкой. Если кнопке e.preventDefault() то форма отправляется один раз - как надо.
const handleClickFormButton = (e, submitForm) => {
e.preventDefault();
submitForm();
};
Эта проблема встречается только в Firefox.
Vlad
Хелло. Может кто сталкивался с такой фичей у Formik?
Почему при submit формы она два раза отправляется? Форму отправляю кнопкой. Если кнопке e.preventDefault() то форма отправляется один раз - как надо.
const handleClickFormButton = (e, submitForm) => {
e.preventDefault();
submitForm();
};
Эта проблема встречается только в Firefox.
может у тебя на кнопке стоит и onClick и type='submit'  сразу?
Vladimir
Хелло. Может кто сталкивался с такой фичей у Formik?
Почему при submit формы она два раза отправляется? Форму отправляю кнопкой. Если кнопке e.preventDefault() то форма отправляется один раз - как надо.
const handleClickFormButton = (e, submitForm) => {
e.preventDefault();
submitForm();
};
Эта проблема встречается только в Firefox.
<button type="button">
Андрей
Андрей
Vlad
убери онКлик оттуда
Vladislav
А на форме событие onSubmit как обрабатывается?
Ivan
А как вы бы сделали такой флоу
Вообщем есть приложение, апи
1. Это получение юзера и его сообщений отдельно/получение токена котрорый нужен для регистрации и других действий в приложении
2. Если есть токен, но он expired, то запустить процесс рефреша токена, затем уже получение юзера и тд?
Может поздно, но почему бы и нет. Я бы сделал на сагах так — есть отдельная сага для проверки и апдейта токена, она запускается перед каждым вызовом апи (или после каждого фэйла обращения к апи), такое очень лаконично на сагах реализуется.
Kirill
Michael
Сделать элементы в 2 стобца
Убрать линию до конца страницы
Yury
Ilya
MⅨ
Вопрос а есть общество по Java?