откуда на этом уроке в компоненте Sort: на 14 строк memo, на 16 строке Ref и sortList уже вне объявленного компонента? в предыдущих уроках не было этого...
Привет, я реализовал сортировку намного проще и более понятно, и в этом уроке это пошло мне на руку, в итоге получилось проще всё, работает также. Надеюсь получился не говноКод и это не сломается в следующих уроках)))
чето на этом уроке у меня миллиард ерроров было, которые сквозь кровь, пот и слёзы были пофикшены, но итогом я получил просто голый бэкграунд вместо приложения. В итоге откатился до прошлого урока и скипнул этот. Если пропустить полностью этот урок - на последующие уроки это никак вообще не повлияет и можно спокойно, нормально заниматься дальше. Так что если кто с такими же проблемами встретиться, решение - скип этого урока. П.С.: Не контент а вкуснятина, Денис спасибо!)
у меня тоже самое. я не пойму откуда взялся redux / slice.js и /redux/filter/selectors. Я так понимаю видимо было какое то промежуточное видео между 14ым и 15ым уроками.
Спасибо за урок! Урок непростой, но в целом все понятно. Мысль и идея хорошо прослеживается. При первом просмотре немного было непонятно, но все решается если посмотришь еще раз:)
Этот перезаписанный вариант 15 урока, на много лучше. Сразу понятно что и как должно работать, а то в первой записи 15 урока, чуть голову себе за час с лишним не сломал...
Все салем! У меня тоже не получалось в начале в этом видео)) Винил во всем автора. Но собрался духом, силами и решил все перепроверить. Оказалось, что виноват я сам ахаха. Вдруг кому поможет, у меня была ошибка в том, что в useEffect я не поставил в нем такие скобки в конце [ ]. Автору всех благ и сил!
Денис, я не уверен. но по идее, если в адресной строке будет стоять url, который соответствует изначальному состоянию хранилища(sort = rating, category = 0 и т.д.), то страница будет пустой, потому что мы достаем из url такие же данные как в initialState и в итоге запрос не уходит. А курс - огонь)
Да, ты прав, я с этим немало провозился, думал что где-то в коде накосячил. В общем написал небольшой фикс, где сравниваю строку, с начальным состоянием редукса. (не забудьте экспортировать initialState из filterSlice) if(Object.values(params).join() === Object.values(initialState).join()){ fetchPizzas(); } Если редакс не хочет обновлять fetch, то мы сделаем это сами. (это надо вставить сразу после строчки где есть qs.parse...)
@@DenysTolmachov if ( initialState.categoryId === Number(params.categoryId) && initialState.selectedSort === params.selectedSort && initialState.currentPage === Number(params.currentPage) ) { fetchPizzas(); } Вот 100% рабочий фикс, нужно импортировать initialState из filterSlice и вставить его после const params = qs.parse(window.location.search.substring(1));
В некоторых браузерах, к примеру, Firefox не работает path, используйте вариатив с composedPath(), загуглить дальше можете сами. Надеюсь кому-то поможет
огромное спасибо автору за его труды. Этот урок был перезаписан. Эту информацию автор сказал в конце. если сказал бы в начале думаю многим кто смотрел был бы ясен почему в коде изменения и не возникли бы некоторые вопрос.
Не работало пока на 8:58 минуте я вместо state.sort = action.payload.sort написал state.sort.sortProperty = action.payload.sort. Ведь в ...params мы передаем только sortProperty а не целый объект с указанием name. Надеюсь поможет.
Я второй или третий день пытаюсь сделать, чтобы оно работало. Был миллиард ошибок, спустя 1001 круг вокруг костра с бубном, единственное, что осталось - это было: ``` TypeError: can't access property "sortProperty", sort is undefined ``` 10 раз переимпортировал зависимости и вплоть до точки скопировал его код и всё равно ничего, пока не наткнулся на твой коммент). От души!
Почему-то код в некоторых компонентах отличается от того что было в прошлом видео Как-будто я пропустил одну часть Наверное изза этого не смог сделать фичу из этого выпуска
Целый день ломаю голову, все несколько раз проверял, делал как в уроке, не получается. При первом рендере работает, перезагружаю страницу, страница не показывается. В адресной строке стираю полученный адрес, работает. В редакторе подчеркиваются зависимости в useEffect и пишется : "Эффект React.use имеет отсутствующую зависимость. Либо включите его, либо удалите массив зависимостей". еще заметил у Дена в коде новые подключения импорт. Может я что то пропустил, или я ...
почитал комменты, хз, как у других, но я повторял все точно за автором, все работает без проблем. Начинал с сникерсов месяц назад на канале у Арчакова, и в итоге только неделю назад допер, что такое юзЕффект, а тут уже такие страсти )). Олсо, для таких же новичков НАСТОЯТЕЛЬНО РЕКОМЕНДУЮ инициализировать гит репозиторий в проекте и на протяжении каждой серии/каждой новой фичи комитить это себе, чтобы можно было в случае чего всегда откатится и пересмотреть серию. Если не умеете в гит, то читайте и возвращайтесь. Надеюсь, кому-то было полезно )
По-моему все можно сделать гораздо проще и понятнее, достаточно сразу установить нужный initialState: function getInitialState() { if (window.location.search) { const params = qs.parse(window.location.search.slice(1)); for (let field in params) { if (typeof params[field] !== 'string') continue; params[field] = Number(params[field]) } return params; } return { category: 0, page: 1, sortType: sortTypes[0], }; } export const filterSlice = createSlice({ name: 'filter', initialState: getInitialState(), // .....
@Marat React Вполне возможно, что человек не в курсе данного API т.к. обилие этих API зашкаливает, что на самом деле круто, потому-что с ними не нужны дополнительные зависимости.
Можно пожалуйста выложить первую версию 15-го урока на ютуб, ибо у многих (судя по коментариям) возникают трудности с написанием кода, это касается изменения некоторых импортов, ввдение мэмо, и тд, просто уже битый час сижу ломаю голову и не знаю как сделать что бы все работало... надеюсь я не один такой
В моём случае ошибка была в том, что был включен strict mode и компонент Home рендерился дважды, useEffect с пустым массивом зависимостей тоже отрабатывал дважды. Отключите его и всё будет работать как в уроке)
У меня тоже всё упало.. -Пересматривал внимательно урок на наличие ошибок. -Сделал все рекомендации по отладке в комментариях. В итоге ничего не помогло. Откатил назад и реализовал тоже самое через useSearchParams
Дэн, спасибо огромное за курс, эту фичу оставил себе на дессерт, правда изначально писал на тайпскрипте. Во время просмотра не покидало ощущение, что вариант с двумя рефами и 3 эффектами выгляди очень громоздко и весьма костыльно. Я использовал useSearchParams из роутера, API гласит что useSearchParams работает как navigate только для поисковых параметров, которые сохраняются в истории браузера после релода. Рефы убрал, использовал 2 еффекта, один зависит от search из useLocation, этот же search передаю как параметр в экш, и этот же search парсится в redux, если он есть конечно Второй эффект срабатывает при флаге (добавил в слайс из опций флаг - вносились ли изменения) и запускает useSearchParams Результат = первый рендер или рендер без поисковых параметров - данные возвращаются так, как они лежат в "бд"; Только мы тыцнули какой-нибудь фильтр - вшивавются парамы - перезагрузка уже проиходит по этим параметрам, при смене роутов (корзина - дом) они также сохраняются Запрос падет один, рефы не ломают UI Вынесете логику в свой хук, и у Вас будет чистая компонента, так сказать разделите представление от функционала
Как сказал Тинькофф, попробую пояснить (и для себя и может кому пригодится) 1. Проблема, что у нас на самый первый рендер появляются параметры, которых быть не должно. Она связано с начальным состоянием нашего редакса. У нас там есть какое-то состояние, оно в этот первый рендер подтягивает через useSelector и получается отрабатывает в useEffect, так как useEffect всегда запускается на первом рендере, даже если есть зависимости. Что мы сделали, мы ввели isMounted, получается, на первый рендер наш useEffect отрабатывает, однако isMounted пока false, поэтому наше начальное состояние из редакса не меняет наш URL, и в этот же момент мы меняем isMounted на true, так как мы сейчас как раз в первом рендере. **Таким образом, начальное состояние редакса не влияет на наш URL при первом рендере.** 2. Допустим у нас есть параметры в начальном URL(которые ме засетали сами, например, скинули другу ссылку с этими параметрами). Изначально у нас работало так: у нас идёт запрос с начальными параметрами, затем сетаются параметры из нашего URL и уходит запрос с новыми параметрами(насколько я понимаю, это связано с асинхронщеной useEffect). Так вот, мы ввели переменную isSearch, по сути она нужна нам только для управления первым рендером, в useEffect, который отрабатывает только в первый рендер, мы проверяем, если у нас есть какие-то параметры в URL(опять-таки, здесь могут быть в данный момент только параметры, которые мы установили сами, например, получив ссылку с параметрами от друга), тогда мы отправляем эти параметры в редакс и устанавливаем isSearch = true, то есть говорим приложению, что у нас есть параметры на первом рендере. В другом useEffect, в котором описана логика запросов, мы проверяем, если у нас есть параметры на первом рендере, томы не делаем запрос(это связано опять-таки с асинхронщиной, наши параметры ещё не успели дойти до редакса и если сейчас мы отправим запрос, он отправиться с начальным стэйтом редакса, а не с параметрами из URL), но устанавливаем флаг isSearch в false, чтобы уже на следующий рендер(а он произйдет как раз когда параметры дойдут до редакса, подтянутся через useSelector и затригирят этот useEffect, так как указаны в зависимостях) запрос отправился. В остальных ситуациях isSearch будет false и запросы будут проходить Надеюсь, кому-то поможет мой поток рассуждений, если кто-то найдёт ошибку или что дополнить, буду рад послушать UPD: если вы вроде сделали такие же useEffectы как на видео, но у вас что-то не работает, проверьте их порядок, кажется он тоже влияет
Когда дойдешь до последнего урока, отпиши плиз работает ли у тебя корректно урл параметры. а именно если ты выберешь категорию, а потом перезагрузишь страницу, будет ли у тебя categoryId=NaN в урл, словил такую багу, не знаю как пофиксить)
Там файловая структура та же осталась. Поменялся только немного App.jsx. и то я объяснил что я поменял. Даже если ты не смог повторить этот урок, все остальное там осталось также и спокойно можешь делать оставшуюся часть
@@ArchakovBlog массив из Сорта тоже можно вытащить? Он раньше был в компоненте, а теперь у вас он отдельно. Когда он в компоненте -его нельзя экспортировать
СМОТРИТЕ ЭТОТ УРОК ПОСЛЕ 19го! Так как код отличается, и у вас он не будет работать. Если че можете даты глянуть, этот урок записан 05.06.2022 сразу после 19го.
ага как сделать 17 тый без этого? честно говоря бросить хочется, так как я делал свой отличающийся проект, но мне нужна была чёткая последовательность, я хрен разберу теперь что тут наколбашенно в этих уроках с 15 по 19, то есть скопировать в слепую я смогу, но свой проэкт у меня дальше не получится нормально сделать
@@lilchich4823 ну там и 17тый не работает тогда, но я тоже скипнул этот курс, кое что возьму отсюда на вооружение конечно, но сейчас мне нужно делать полноценные вещи с бэкэндом, смотрю другие уроки по node и как совместить фронт и бэк, благодарен человеку за уроки, но нужно углубляться дальше
Здравствуйте ,можете подсказать, почему вы использовали useRef при проверке на изменения при загрузке страницы. Я проверил, так же, но только с useState работать не будет, хотелось бы узнать причину. Заранее спасибо!
Если использовать в index.js React.StrictMode, то компонент отрисовывается дважды, и проверки на первый рэндер обходятся. Можно ли это пофиксить как-то кроме удаления стрикт мода?
Короче, как и многие словил траблы, скипаю Проблема в том, что вот тут dispatch(setFilters({ ...params, sort })) params почему-то не считается итерируемым, возможно в qs были изменения, из-за чего у него тогда работало, а у нас сейчас нет Автор, спасибо за труд!
тоже самое было, грешил на то что где-то напутал или еще чего, пока полтора часа сидел пытался разобраться, в консоли так же копировал объект ( через спред оператор) , через какое-то время сам заного по одному параметру передавал в редакс пока все не заработало, собственно я так и не понял почему изначально не работал спред оператор, короче печаль, так и не понял в итоге в чем была проблема...
Господа, это какой-то перезаписанный урок, когда было написано все? Или почему появились мемо в компонентах, селекторы из реселекта и пр мелочи, которых не было в прошлом уроке?
Ничего не понимаю, всё сделано точь-в-точь как в видео, стрикт режим отключен, код написан идентично файлу автора, но при этом при обновлении страницы строка запроса не очищается и приложение просто ломается
В целом всё понятно, кроме одного🤔. Как Реакт будет делать запрос при первом открытии приложения по адресной строке с параметрами, именно по этим параметрам и правильно при этом? Если запрос мы делаем через функцию axiosPizzas, а она вызывается только в 3-ем useEffect
привет! Я верно понимаю, что в классовых компонентах вышеописанный нюанс с useEffect решают методы жизненного цикла (в частности можно использовать componentDidMount)?
Потому что если бы ты делал изменение через, например, setIsSearch(true) - ты бы заставил компонент перерисоваться, поскольку изменение стейта перерисовывает компонент. А вот используя useRef ты можешь хранить какие-нибудь данные без повторной перерисовки. Здесь нам надо четко придерживаться алгоритму без перерисовки, потому так.
Сложно сказать без кода. Чекни зависимости юзэффекта, при изменении категории на «Все», отправляется ли запрос и если нет, то проверь, что хранится в категории + проверь, когда меняешь на «Все», у тебя диспатч происходит или нет
У меня возникла проблема, если обновить главную страницу с категорией все, то не поступает запрос и информация не приходит, вроде уже посмотрел код не один раз сравнил, но все-равно не работает, может у кого такая же проблема
Можешь попробывать поледний useEffect изменить (убрать условие), но хз на сколько это будет верным решением. useEffect(() => { window.scrollTo(0, 0); fetchPizzas(); isSearch.current = false; }, [categoryId, sort.sortProperty, searchValue, currentPage]);
@@КоляБеленчук ну по идее это будет работать, но по факту не будет проверки с URL, а просто в любом случае будет запрос, но все равно, спасибо за совет
Возможно, сделал костылем, но пока обхожу эту ошибку вот так: if ( window.location.search && window.location.search !== "?sortProperty=rating&categoryId=0¤tPage=1" )
Кто сталкивался: при выборе категории отличной от "Все", нажимаешь на логотип сайта - он очищает url (делает путь по умолчанию '/'), но данные остаются прежние (перерисовка не происходит). Спасибо.
Разобрался? Я пробовал написать функционал, чтобы и при таком кейсе сбрасывались фильтры, но столкнулся с проблемой когда мы потыкали фильтры, возвращаем все фильтры в значения, которые были при initialState и перезагружаем страницу - запрос на пиццы не отправляется из-за того, что идет изменение стейта в эффекте, который парсит адресную строку, но стейт после изменения получается тем же самым, без изменений, из-за чего и нет ререндера для отправки запроса.
@@StrikerFeed еще не пробовал это. Но думаю, если в итоговом решении этого функционала нет, то автор тоже не решил проблему. Из-за введения двух стейтов для отслеживания первого и последующих рендеров - решить проблему нет возможности при текущем функционале. Как писали ниже, нужно использовать хук useSearchParams и useLocation, а там только метод проб и ошибок.
@@StrikerFeed решил, конечно не сильно идеально, но все-таки. Как и говорили ниже: использовал хуки useLocation и useSearchParams, первый для отслеживания самой адресной строки (пустая или нет, при первом запуске приложения), а второй для формирования самой ссылки в адресной строке. Вроде бы все работает хорошо, но иногда при нескольких перезагрузках подряд, теряется id категории и запрос на сервер отправляется, как "Все", а не выбранной категории.
я реально зашел в тупик. помогите) я так понял, был какой то промежуточный урок. где были созданы новые папки и файлы и установлен React.memo. Есть ли возможность его найти?
React / redux/ спасибо за курс P.s если у кого то не получается сохранять параметры из Url просто забейте и идите дальше как я=) со временем все получится))
@@ДмитрийСитников-ш2х Практическое? ну смотри, вот ты хочешь отослать другу ссылку на фильтр пицц(товаров) кидаешь линк и сайт по этому линку понимает какой запрос сделать и что отобразить, не?
Прошёл этот урок. Всё повторял за Дэнисом, всё работает. Принимаю заявки на сотрудничество, выписываю автографы. Начиная с 10 урока, делаю отдельные коммиты на каждый урок. И вам советую :)
Можем ли мы как-то проверять правильность введенных данных в url? То есть пользователь же может ввести любую страницу, даже ту, которой у нас не будет и тогда все поломается. Как это обрабатывать, если у нас есть бекенд, по ошибке кидать запрос с initial параметрами?
Приветствую. Спасибо за труд. Подскажите пожалуйста почему на 15:54 мы используем useRef, а не обычный флаг к примеру let isSearching = false, или let isMounted = false. Есть ли разница?
Если так абстрагироваться от всех нюансов и посмотреть со стороны, то вроде все понятно Но когда дело доходит до того, чтоб повторить самому - хер там ! Мозг подвзорвался от перечня того, что нужно проделать чтоб херовы параметры вшывались в херов url Пошло оно все ... 😂
Если хотите исправить сброс параметров при клике на логотип - то предлагаю свой костыль. Запихнуть isMounted в редакс, а в хедере создать кастомную функцию в которой будем сбрасывать все параметры и соответсвтенно isMounted = false. Код ниже: const onClickHome = () => { dispatch(changeCategory(0)) dispatch(changePage(0)) dispatch(changeSort("rating ↑")) dispatch(changeMount(false)) }
подскажите, откуда selectFilter???? почему - то у меня нет после прохождения 14 уроков (((( в общем, почему - то все запуталось, я с 17 урока пришла сюда, открыла ваш код, но все равно есть новые файлы которые не могу найти - это селект фильтер/ как бы теперь дойти до конца приложения или новичку это невозможно сделать ? первые уроки так хорошо начинались , и вот к концу видимо что - то сделано за кадром что непонятно как реализовать функционал 😪😪😪
Привіт, подивіться до кінця відео автор сказав що в наступних уроках цих змінних небуде бо це перезалив. Я теж пропустив 15 урок і тепер до нього повернувся з 17 уроку, впринципі все працює, тепер переходжу до 17 уроку.
Я три раза пересмотрел видео и три раза сделал всё один в один. Почти всё работает, но если нажать все и перезагрузить браузер, то запрос почему то не делается. Но нажать на другую категорию, запрос снова выполниться. Не понимаю... Но в любом случае спасибо)
У меня какой то неожиданный затуп. Вот приложение загружается с корневого адреса '/', происходит проверка, подставляются стартовые данные и получаю пиццы, далее я тыкаю на вторую категорию, делается запрос и получаю нормальный рендер, далее я возвращаюсь на первую категорию и получаю такие параметры в URL '?currentPage=1&sortProperty=rating&categoryId=0' и нормальный рендер. НО если я решу перезагрузить страницу с этими параметрами, то у меня не делается запрос и логично не грузятся пиццы, причем КеК в том что если я меняю через морду сайта любой параметр и так же обновляю стр, то все работает, все ломается исключительно на стоковых обнуленных параметрах)
@@ЭдриаӇ̄ const params = false или const params = React.useRef(false) В React разница между const params = false и const params = React.useRef(false) заключается в том, как эти значения обрабатываются и изменяются компонентом. const params = false: Здесь params является просто переменной со значением false. При каждом рендере компонента, params будет иметь одно и то же значение false. Если вы попытаетесь изменить значение params напрямую, например, params = true, это вызовет ошибку, потому что вы не можете изменять значение переменной, объявленной с использованием const. const params = React.useRef(false): Здесь params является объектом типа Ref, созданным с помощью React.useRef. useRef возвращает изменяемый объект, содержащий свойство .current. При каждом рендере компонента params остается неизменным, но вы можете изменять его свойство .current без вызова перерендера компонента. Например, params.current = true изменит значение, хранящееся в params, но компонент не будет перерисован. Это полезно, когда вам нужно сохранить значение между рендерами без вызова перерисовки. Итак, если вам нужно иметь простое значение, которое будет обновляться и вызывать перерисовку компонента, используйте const params = useState(false). Если вам нужно сохранить значение без вызова перерисовки компонента при его изменении, используйте const params = useRef(false).
Почему в уроке ты решил не использовать хуки из React Router: useSearchParams для работы с параметрами и useLocation для проверки имеются ли параметры?
А через классовый компонент если реализовать, где есть возможность разделить методы по componentDidMount и componentDidUpdate это имеет смысл реализовать, будет ли это короче?
Все сделал в точности по "видео", но трэшак начинается с момента, когда export sortList (который до этого назывался просто list) вставляешь в home на 11:20. Примечательно, что в проекте откуда-то почему-то Sort становится const с использованием useMEmo, о котором не было в этом курсе до этого ни слова. Делаешь такой все делаешь, правишь ошибки (потому что то и дело что-то не сходится), доходишь до проверки на 12:00 - в видосе все работает, у тебя не работает. Заходишь в комменты - все воют, что видос был переписан но видать с места из будующих уроков, где на 12:00 идет явная нестыковка. И ты такой только изучил редакс и новую тему, видишь какие-то новые хуки, которых никогда не видел (useMEmO)и просто в ахуе от того, как это дальше смотреть и что делать Сказать, что не хватает МАТОВ - нихуя не сказать
Оказалось, всего-то надо было удалить из индекса strict mode, беру свои слова назад! ) Спасибо за очередной крутой видос!) Но Юз Мемо прямо сбивает, кажется, что у тебя не из-за того, что у тебя что-то не так в проекте, а то, что в нем что-то уже переделано )
Исходник из этого урока Home.jsx: gist.github.com/Archakov06/af2b3a0219245dd209ae5a592d3cab81
откуда на этом уроке в компоненте Sort: на 14 строк memo, на 16 строке Ref и sortList уже вне объявленного компонента? в предыдущих уроках не было этого...
Привет, я реализовал сортировку намного проще и более понятно, и в этом уроке это пошло мне на руку, в итоге получилось проще всё, работает также. Надеюсь получился не говноКод и это не сломается в следующих уроках)))
@@demptd13 ага, такая же история. судя по комментам это перезалив, до этого было какое-то другое видео под №15
@ArchakovBlog отвечай!!! зачем ты это сделал!!!!
@@NayroTV ахахах, у тебя тоже жопа сгорела)
Туши быстрее)
Первый сложный урок из курса, спасибо за объяснения!)
он много что не показал!!!!!
@@NayroTV что не показал?
чето на этом уроке у меня миллиард ерроров было, которые сквозь кровь, пот и слёзы были пофикшены, но итогом я получил просто голый бэкграунд вместо приложения. В итоге откатился до прошлого урока и скипнул этот. Если пропустить полностью этот урок - на последующие уроки это никак вообще не повлияет и можно спокойно, нормально заниматься дальше. Так что если кто с такими же проблемами встретиться, решение - скип этого урока.
П.С.: Не контент а вкуснятина, Денис спасибо!)
у меня тоже самое. я не пойму откуда взялся redux / slice.js и /redux/filter/selectors. Я так понимаю видимо было какое то промежуточное видео между 14ым и 15ым уроками.
Госопди почему я только что это прочитал, марочился 2 дня
на 17 уроке появляется fetchPizzza из ниоткуда если скипнуть этоти не возвращаться ( и селекторы тоже непонятно
@@YulVilaya селекторы из react-redux , ранее говорили об этом
Спасибо за урок! Урок непростой, но в целом все понятно. Мысль и идея хорошо прослеживается. При первом просмотре немного было непонятно, но все решается если посмотришь еще раз:)
Этот перезаписанный вариант 15 урока, на много лучше. Сразу понятно что и как должно работать, а то в первой записи 15 урока, чуть голову себе за час с лишним не сломал...
спасибо большое за твой труд! а этот урок, конкретно библиотека qs, спасла меня от вечера мучений :*
Отличный урок, делал фильтры по своему без усложнений ( по умному ) и на этом этапе не возникло никаких сложностей
Крутой урок !!! Конечно пришлось потратить время, чтобы понять логику но оно того стоило. Спасибо большое
Денис, большое спасибо! Очень крутой, полезный урок. Заставляет пошевелить мозгами)
Все салем! У меня тоже не получалось в начале в этом видео)) Винил во всем автора. Но собрался духом, силами и решил все перепроверить. Оказалось, что виноват я сам ахаха. Вдруг кому поможет, у меня была ошибка в том, что в useEffect я не поставил в нем такие скобки в конце [ ]. Автору всех благ и сил!
Спасибо, я пожалуй на следующий урок, а то чет всё сломалось, а я исправлениями ещё сильнее доломал, повезло что откатиться к началу смог😂
он много что не показал!!!!!
Денис, ты большой молодец, перезаписал урок, заморочился, объяснил как дальше будет, спасибо, что не забил.
Денис, я не уверен. но по идее, если в адресной строке будет стоять url, который соответствует изначальному состоянию хранилища(sort = rating, category = 0 и т.д.), то страница будет пустой, потому что мы достаем из url такие же данные как в initialState и в итоге запрос не уходит.
А курс - огонь)
Да, ты прав, я с этим немало провозился, думал что где-то в коде накосячил.
В общем написал небольшой фикс, где сравниваю строку, с начальным состоянием редукса. (не забудьте экспортировать initialState из filterSlice)
if(Object.values(params).join() === Object.values(initialState).join()){
fetchPizzas();
}
Если редакс не хочет обновлять fetch, то мы сделаем это сами. (это надо вставить сразу после строчки где есть qs.parse...)
@@guffboss2358 что то не помогло
@@DenysTolmachov if (
initialState.categoryId === Number(params.categoryId) &&
initialState.selectedSort === params.selectedSort &&
initialState.currentPage === Number(params.currentPage)
) {
fetchPizzas();
}
Вот 100% рабочий фикс, нужно импортировать initialState из filterSlice и вставить его после const params = qs.parse(window.location.search.substring(1));
@@misha_kanyuka спасибо, действительно работает
@@misha_kanyuka спасибо тебе чеел)
Оч годные уроки. Спасибо. Но то, что здесь резко появляются какие-то другие файлы- это совершенно все "ломает". Пожалуй лучше пропущу этот урок
Урок мне понравился, это реально используется всё на проекте! У меня задача была кокраз с этим связана!
Наконец-то вышел,ура 🥳Спасибо за контент,надеюсь теперь видео будут выходить почаще
Юхууууууу ну наконец-то 🥳🥳🥳
тяжкий урок, немного недопонимал логику работы с тремя useEffect. Но работа с console.log расставила все по местам, спасибо)
В некоторых браузерах, к примеру, Firefox не работает path, используйте вариатив с composedPath(), загуглить дальше можете сами. Надеюсь кому-то поможет
огромное спасибо автору за его труды. Этот урок был перезаписан. Эту информацию автор сказал в конце. если сказал бы в начале думаю многим кто смотрел был бы ясен почему в коде изменения и не возникли бы некоторые вопрос.
Вижу 32 минут, ну думаю, быстро закончу с этим уроком, в итоге весь день провел, но все работает теперь
+ )
Шикарно! Спасибо!
Долго ждали ))). Спасибо.
Как-то упустила момент когда все файлы .jsx стали .js... И появились куча новых импортов и тд..
Не работало пока на 8:58 минуте я вместо state.sort = action.payload.sort написал state.sort.sortProperty = action.payload.sort. Ведь в ...params мы передаем только sortProperty а не целый объект с указанием name. Надеюсь поможет.
Спасибо, реально помогло
нет. ищем и передаём объект. но ты уже наверное сам разобрался =)
Бро ты мне сэкономил время. Спасибо!
Я второй или третий день пытаюсь сделать, чтобы оно работало. Был миллиард ошибок, спустя 1001 круг вокруг костра с бубном, единственное, что осталось - это было:
```
TypeError: can't access property "sortProperty", sort is undefined
```
10 раз переимпортировал зависимости и вплоть до точки скопировал его код и всё равно ничего, пока не наткнулся на твой коммент). От души!
очень нравятся ваши уроки, большое вам спасибо
Почему-то код в некоторых компонентах отличается от того что было в прошлом видео
Как-будто я пропустил одну часть
Наверное изза этого не смог сделать фичу из этого выпуска
Ты про React.memo деструктуризацию компонентов и export lista?
Да тоже заметил
спасибо учитель😊
ОЧЕНЬ ОЧЕНЬ плохой прыжок в коде после прошлого урока. Абсолютно запутал...
Целый день ломаю голову, все несколько раз проверял, делал как в уроке, не получается. При первом рендере работает, перезагружаю страницу, страница не показывается. В адресной строке стираю полученный адрес, работает. В редакторе подчеркиваются зависимости в useEffect и пишется : "Эффект React.use имеет отсутствующую зависимость. Либо включите его, либо удалите массив зависимостей". еще заметил у Дена в коде новые подключения импорт. Может я что то пропустил, или я ...
я тоже повторил за видео и не работает как надо, проверял вроде все правильно , нету пока времени разбираться
Может вы currentPage не изменили на 1 в редаксе)
Благодарю за вложенный труд!
Бомби, у тебя отлично получается!
#react #reduxtoolkit
почитал комменты, хз, как у других, но я повторял все точно за автором, все работает без проблем. Начинал с сникерсов месяц назад на канале у Арчакова, и в итоге только неделю назад допер, что такое юзЕффект, а тут уже такие страсти )). Олсо, для таких же новичков НАСТОЯТЕЛЬНО РЕКОМЕНДУЮ инициализировать гит репозиторий в проекте и на протяжении каждой серии/каждой новой фичи комитить это себе, чтобы можно было в случае чего всегда откатится и пересмотреть серию. Если не умеете в гит, то читайте и возвращайтесь. Надеюсь, кому-то было полезно )
По-моему все можно сделать гораздо проще и понятнее, достаточно сразу установить нужный initialState:
function getInitialState() {
if (window.location.search) {
const params = qs.parse(window.location.search.slice(1));
for (let field in params) {
if (typeof params[field] !== 'string') continue;
params[field] = Number(params[field])
}
return params;
}
return {
category: 0,
page: 1,
sortType: sortTypes[0],
};
}
export const filterSlice = createSlice({
name: 'filter',
initialState: getInitialState(),
// .....
Сделал через через useSearchParams, он же специально для этого создан. В нем все есть и не нужен qs и useNavigate.
@Marat React быть может потом объяснит
Можешь плиз дать ссылку на свой репозеторий ? Не могу понять как правильно здесь использовать useSearchParams
@Marat React Вполне возможно, что человек не в курсе данного API т.к. обилие этих API зашкаливает, что на самом деле круто, потому-что с ними не нужны дополнительные зависимости.
Спасибо, добрый человек, классный хук)
Можно пожалуйста выложить первую версию 15-го урока на ютуб, ибо у многих (судя по коментариям) возникают трудности с написанием кода, это касается изменения некоторых импортов, ввдение мэмо, и тд, просто уже битый час сижу ломаю голову и не знаю как сделать что бы все работало... надеюсь я не один такой
gist.github.com/Archakov06/af2b3a0219245dd209ae5a592d3cab81
вопрос к тем кто смотрел видео на бусти (15 урок изначальную версию), там все также как в этом видео или есть какие-то кардинальные различия?
@@ArchakovBlog спасибо большое!
В моём случае ошибка была в том, что был включен strict mode и компонент Home рендерился дважды, useEffect с пустым массивом зависимостей тоже отрабатывал дважды. Отключите его и всё будет работать как в уроке)
ТЫ ЛУЧИК СВЕТА Я УЖЕ В ТАКОМ ТИЛЬТЕ БЫЛ И ЗАБЫЛ ПРО СТРИКТ МОД
Если вдруг кто-то решил делать не через React а через NextJS, то useNavigate можно заменить на import { useRouter } from "next/navigation";
У меня тоже всё упало..
-Пересматривал внимательно урок на наличие ошибок.
-Сделал все рекомендации по отладке в комментариях.
В итоге ничего не помогло. Откатил назад и реализовал тоже самое через useSearchParams
Урок невероятно душный, кучу раз пересматривал, все равно по ощущениям не все понял. Буду смотреть следующие, если что вернусь, но надеюсь что нет)
то что нужно !
спасибо :)
Дэн, спасибо огромное за курс, эту фичу оставил себе на дессерт, правда изначально писал на тайпскрипте.
Во время просмотра не покидало ощущение, что вариант с двумя рефами и 3 эффектами выгляди очень громоздко и весьма костыльно.
Я использовал useSearchParams из роутера, API гласит что useSearchParams работает как navigate только для поисковых параметров, которые сохраняются в истории браузера после релода.
Рефы убрал, использовал 2 еффекта, один зависит от search из useLocation, этот же search передаю как параметр в экш, и этот же search парсится в redux, если он есть конечно
Второй эффект срабатывает при флаге (добавил в слайс из опций флаг - вносились ли изменения) и запускает useSearchParams
Результат = первый рендер или рендер без поисковых параметров - данные возвращаются так, как они лежат в "бд";
Только мы тыцнули какой-нибудь фильтр - вшивавются парамы - перезагрузка уже проиходит по этим параметрам, при смене роутов (корзина - дом) они также сохраняются
Запрос падет один, рефы не ломают UI
Вынесете логику в свой хук, и у Вас будет чистая компонента, так сказать разделите представление от функционала
сделал примерно также
нихуя не понятно что ты тут написал. Вроде Реакт Пицца для новичков
Сложный урок, буду пересматривать
Он сложнее мне показался чем redux
омг. все ж хорошо шло до этого
Как сказал Тинькофф, попробую пояснить (и для себя и может кому пригодится)
1. Проблема, что у нас на самый первый рендер появляются параметры, которых быть не должно. Она связано с начальным состоянием нашего редакса. У нас там есть какое-то состояние, оно в этот первый рендер подтягивает через useSelector и получается отрабатывает в useEffect, так как useEffect всегда запускается на первом рендере, даже если есть зависимости. Что мы сделали, мы ввели isMounted, получается, на первый рендер наш useEffect отрабатывает, однако isMounted пока false, поэтому наше начальное состояние из редакса не меняет наш URL, и в этот же момент мы меняем isMounted на true, так как мы сейчас как раз в первом рендере. **Таким образом, начальное состояние редакса не влияет на наш URL при первом рендере.**
2. Допустим у нас есть параметры в начальном URL(которые ме засетали сами, например, скинули другу ссылку с этими параметрами). Изначально у нас работало так: у нас идёт запрос с начальными параметрами, затем сетаются параметры из нашего URL и уходит запрос с новыми параметрами(насколько я понимаю, это связано с асинхронщеной useEffect). Так вот, мы ввели переменную isSearch, по сути она нужна нам только для управления первым рендером, в useEffect, который отрабатывает только в первый рендер, мы проверяем, если у нас есть какие-то параметры в URL(опять-таки, здесь могут быть в данный момент только параметры, которые мы установили сами, например, получив ссылку с параметрами от друга), тогда мы отправляем эти параметры в редакс и устанавливаем isSearch = true, то есть говорим приложению, что у нас есть параметры на первом рендере. В другом useEffect, в котором описана логика запросов, мы проверяем, если у нас есть параметры на первом рендере, томы не делаем запрос(это связано опять-таки с асинхронщиной, наши параметры ещё не успели дойти до редакса и если сейчас мы отправим запрос, он отправиться с начальным стэйтом редакса, а не с параметрами из URL), но устанавливаем флаг isSearch в false, чтобы уже на следующий рендер(а он произйдет как раз когда параметры дойдут до редакса, подтянутся через useSelector и затригирят этот useEffect, так как указаны в зависимостях) запрос отправился. В остальных ситуациях isSearch будет false и запросы будут проходить
Надеюсь, кому-то поможет мой поток рассуждений, если кто-то найдёт ошибку или что дополнить, буду рад послушать
UPD: если вы вроде сделали такие же useEffectы как на видео, но у вас что-то не работает, проверьте их порядок, кажется он тоже влияет
Когда дойдешь до последнего урока, отпиши плиз работает ли у тебя корректно урл параметры. а именно если ты выберешь категорию, а потом перезагрузишь страницу, будет ли у тебя categoryId=NaN в урл, словил такую багу, не знаю как пофиксить)
@@SpauN- ++Тоже_Борюсь++
Спасибо огромное!!!!!!
спасибо за урок ментор
Спасибо!
Он забыл наверное что делает для джунов :(
Надеюсь все же, что это не для джунов. В противном случае у меня для себя плохие новости )))
@@mryolo5334 а для кого? Сеньоров? Он сам в начале сказал что для джунов
если кто-то озадачен что useEffect в браузерной консоли отрабатывает два раза, не пугайтесь, это обычное поведение при включенном режиме Strict Mode 🙂
а как его отключить?
@@v1shn3vski83 удалить строгий режим
сложно, но понятно) спасибо
этот урок первый из сложных - разобраться со всеми разными useEffect'ами - задача
Спасибо
крч с этим методом не смог сделать, уж слишком много мелочевки, почему все таки не сделал с помощью useSearchParams?
Я не одинок, тоже не работает, 3 раза пересматривал ))
@Marat React толку, если вся файловая структура была переделана?
Там файловая структура та же осталась. Поменялся только немного App.jsx. и то я объяснил что я поменял.
Даже если ты не смог повторить этот урок, все остальное там осталось также и спокойно можешь делать оставшуюся часть
@@ArchakovBlog как я понял, там теперь по-другому экспортируются компоненты, то есть не через export default, а отдельно
@@ArchakovBlog массив из Сорта тоже можно вытащить? Он раньше был в компоненте, а теперь у вас он отдельно. Когда он в компоненте -его нельзя экспортировать
Запиши видео про реакт менторство почему доступен только один тариф?
СМОТРИТЕ ЭТОТ УРОК ПОСЛЕ 19го! Так как код отличается, и у вас он не будет работать. Если че можете даты глянуть, этот урок записан 05.06.2022 сразу после 19го.
ага как сделать 17 тый без этого? честно говоря бросить хочется, так как я делал свой отличающийся проект, но мне нужна была чёткая последовательность, я хрен разберу теперь что тут наколбашенно в этих уроках с 15 по 19, то есть скопировать в слепую я смогу, но свой проэкт у меня дальше не получится нормально сделать
@@thebeastd4158 Внизу про стрикт мод написано , попробуй
@@thebeastd4158 я ваще фул скипнул этот урок и не возвращался к нему. И ты забей
@@lilchich4823 ну там и 17тый не работает тогда, но я тоже скипнул этот курс, кое что возьму отсюда на вооружение конечно, но сейчас мне нужно делать полноценные вещи с бэкэндом, смотрю другие уроки по node и как совместить фронт и бэк, благодарен человеку за уроки, но нужно углубляться дальше
@@thebeastd4158 почему тоже? я не скипнул курс, я скинпул только этот урок
надеюсь что это самый неудачный урок а дальше будет норм)
Здравствуйте ,можете подсказать, почему вы использовали useRef при проверке на изменения при загрузке страницы. Я проверил, так же, но только с useState работать не будет, хотелось бы узнать причину. Заранее спасибо!
Если использовать в index.js React.StrictMode, то компонент отрисовывается дважды, и проверки на первый рэндер обходятся. Можно ли это пофиксить как-то кроме удаления стрикт мода?
Спасибо за урок. Но пошел ты каким-то длинным путем, костылей понаставил. Думаю тут можно было и попроще написать код
Короче, как и многие словил траблы, скипаю
Проблема в том, что вот тут dispatch(setFilters({ ...params, sort })) params почему-то не считается итерируемым, возможно в qs были изменения, из-за чего у него тогда работало, а у нас сейчас нет
Автор, спасибо за труд!
тоже самое было, грешил на то что где-то напутал или еще чего, пока полтора часа сидел пытался разобраться, в консоли так же копировал объект ( через спред оператор) , через какое-то время сам заного по одному параметру передавал в редакс пока все не заработало, собственно я так и не понял почему изначально не работал спред оператор, короче печаль, так и не понял в итоге в чем была проблема...
Как это пофиксить? Такая же проблема
попробуйте заюзать rtk-query, он закеширует запросы... А так хрень получаеться с этим isSearch....
Надеюсь, кому-то помогу:
Вынесите вне компонента,
export const list = [
{ name: "популярности (DESC)", sortProperty: "rating" },
{ name: "популярности (ASC)", sortProperty: "-rating" },
{ name: "цена (DESC)", sortProperty: "price" },
{ name: "цена (ASC)", sortProperty: "-price" },
{ name: "алфавиту (DESC)", sortProperty: "title" },
{ name: "алфавиту (ASC)", sortProperty: "-title" },
];
Используйте list, а не sortList, как было в видео.
Когда будете import в Home, не забудьте про дестрктуризацию:
import { list } from "../components/Sort";
как?? но помог)
ппххп я тоже навал list вместо sortList
спасибо!!!
Господа, это какой-то перезаписанный урок, когда было написано все?
Или почему появились мемо в компонентах, селекторы из реселекта и пр мелочи, которых не было в прошлом уроке?
Я в конце урока объясняю этот момент
@@ArchakovBlog в этом ролике конце не обьяснил
Ничего не понимаю, всё сделано точь-в-точь как в видео, стрикт режим отключен, код написан идентично файлу автора, но при этом при обновлении страницы строка запроса не очищается и приложение просто ломается
В целом всё понятно, кроме одного🤔. Как Реакт будет делать запрос при первом открытии приложения по адресной строке с параметрами, именно по этим параметрам и правильно при этом? Если запрос мы делаем через функцию axiosPizzas, а она вызывается только в 3-ем useEffect
привет! Я верно понимаю, что в классовых компонентах вышеописанный нюанс с useEffect решают методы жизненного цикла (в частности можно использовать componentDidMount)?
привет, да
Почему мы для isSearch и isMounted используем useRef, а не useState?
да, интересно в чем разница
Потому что если бы ты делал изменение через, например, setIsSearch(true) - ты бы заставил компонент перерисоваться, поскольку изменение стейта перерисовывает компонент.
А вот используя useRef ты можешь хранить какие-нибудь данные без повторной перерисовки. Здесь нам надо четко придерживаться алгоритму без перерисовки, потому так.
@@StrikerFeed спасибо за ответ)
Топ!
Внимание! Приложение должно было бы сломаться так как в Апп.джс прописаны роуты и там так:
ТОП
Дэн, что-то не получается делать как у тебя. Я несколько часов голову ломаю)
Что именно?
@@ArchakovBlog Дэн, подскажи, пожалуйста, из-за чего при перезагрузке на категории "Все" не происходит загрузка?
Сложно сказать без кода. Чекни зависимости юзэффекта, при изменении категории на «Все», отправляется ли запрос и если нет, то проверь, что хранится в категории + проверь, когда меняешь на «Все», у тебя диспатч происходит или нет
MDN: URLSearchParams
апишка для работы с квери строками есть в браузерах из коробки.
У меня возникла проблема, если обновить главную страницу с категорией все, то не поступает запрос и информация не приходит, вроде уже посмотрел код не один раз сравнил, но все-равно не работает, может у кого такая же проблема
Можешь попробывать поледний useEffect изменить (убрать условие), но хз на сколько это будет верным решением.
useEffect(() => {
window.scrollTo(0, 0);
fetchPizzas();
isSearch.current = false;
}, [categoryId, sort.sortProperty, searchValue, currentPage]);
@@КоляБеленчук ну по идее это будет работать, но по факту не будет проверки с URL, а просто в любом случае будет запрос, но все равно, спасибо за совет
@@fixggamer8756 так и есть(
Да, такая же ситуация
Возможно, сделал костылем, но пока обхожу эту ошибку вот так:
if (
window.location.search &&
window.location.search !==
"?sortProperty=rating&categoryId=0¤tPage=1"
)
Кто сталкивался: при выборе категории отличной от "Все", нажимаешь на логотип сайта - он очищает url (делает путь по умолчанию '/'), но данные остаются прежние (перерисовка не происходит). Спасибо.
Разобрался? Я пробовал написать функционал, чтобы и при таком кейсе сбрасывались фильтры, но столкнулся с проблемой когда мы потыкали фильтры, возвращаем все фильтры в значения, которые были при initialState и перезагружаем страницу - запрос на пиццы не отправляется из-за того, что идет изменение стейта в эффекте, который парсит адресную строку, но стейт после изменения получается тем же самым, без изменений, из-за чего и нет ререндера для отправки запроса.
@@StrikerFeed еще не пробовал это. Но думаю, если в итоговом решении этого функционала нет, то автор тоже не решил проблему. Из-за введения двух стейтов для отслеживания первого и последующих рендеров - решить проблему нет возможности при текущем функционале. Как писали ниже, нужно использовать хук useSearchParams и useLocation, а там только метод проб и ошибок.
@@StrikerFeed решил, конечно не сильно идеально, но все-таки. Как и говорили ниже: использовал хуки useLocation и useSearchParams, первый для отслеживания самой адресной строки (пустая или нет, при первом запуске приложения), а второй для формирования самой ссылки в адресной строке. Вроде бы все работает хорошо, но иногда при нескольких перезагрузках подряд, теряется id категории и запрос на сервер отправляется, как "Все", а не выбранной категории.
я реально зашел в тупик. помогите) я так понял, был какой то промежуточный урок. где были созданы новые папки и файлы и установлен React.memo. Есть ли возможность его найти?
нет. автор об этом тупо молчит!
пропускаем это видео
React / redux/ спасибо за курс
P.s если у кого то не получается сохранять параметры из Url просто забейте и идите дальше как я=) со временем все получится))
А зачем их сохранять из Url? Практическое применение какое? Понять не могу
@@ДмитрийСитников-ш2х Практическое? ну смотри, вот ты хочешь отослать другу ссылку на фильтр пицц(товаров) кидаешь линк и сайт по этому линку понимает какой запрос сделать и что отобразить, не?
@@komrad124 теперь понял) спасибо)
@@ДмитрийСитников-ш2х хех, пожалуйста)
Прошёл этот урок. Всё повторял за Дэнисом, всё работает. Принимаю заявки на сотрудничество, выписываю автографы. Начиная с 10 урока, делаю отдельные коммиты на каждый урок. И вам советую :)
Подскажите, пожалуйста, от куда взялся import { selectFilter } from '../redux/filter/selectors' !? В предыдущих уроках не было этого..
8:20
18 урок, 31:20 там фиксится этот момент
@@komrad124 не верно. там про другое.
Один з найскладніших уроків((
+
Можем ли мы как-то проверять правильность введенных данных в url? То есть пользователь же может ввести любую страницу, даже ту, которой у нас не будет и тогда все поломается. Как это обрабатывать, если у нас есть бекенд, по ошибке кидать запрос с initial параметрами?
Приветствую. Спасибо за труд. Подскажите пожалуйста почему на 15:54 мы используем useRef, а не обычный флаг к примеру let isSearching = false, или let isMounted = false. Есть ли разница?
конечно есть, useRef сохраняет свое значение при перерендере, а let у тебя будет каждый раз создаваться с изначальным значением.
лучше пропусти данный урок и возвращайся до ts
Если так абстрагироваться от всех нюансов и посмотреть со стороны, то вроде все понятно
Но когда дело доходит до того, чтоб повторить самому - хер там !
Мозг подвзорвался от перечня того, что нужно проделать чтоб херовы параметры вшывались в херов url
Пошло оно все ... 😂
Если хотите исправить сброс параметров при клике на логотип - то предлагаю свой костыль. Запихнуть isMounted в редакс, а в хедере создать кастомную функцию в которой будем сбрасывать все параметры и соответсвтенно isMounted = false. Код ниже:
const onClickHome = () => {
dispatch(changeCategory(0))
dispatch(changePage(0))
dispatch(changeSort("rating ↑"))
dispatch(changeMount(false))
}
круто, пофиксил. Спасибо добрый человек!
очень сложно понять
но спасибо
Заметил, что активная категория скачет от "Все" к тому, что задано в поиске, из-за начального состояния. Это возможно как-то исправить?
подскажите, откуда selectFilter???? почему - то у меня нет после прохождения 14 уроков (((( в общем, почему - то все запуталось, я с 17 урока пришла сюда, открыла ваш код, но все равно есть новые файлы которые не могу найти - это селект фильтер/ как бы теперь дойти до конца приложения или новичку это невозможно сделать ? первые уроки так хорошо начинались , и вот к концу видимо что - то сделано за кадром что непонятно как реализовать функционал 😪😪😪
Привіт, подивіться до кінця відео автор сказав що в наступних уроках цих змінних небуде бо це перезалив. Я теж пропустив 15 урок і тепер до нього повернувся з 17 уроку, впринципі все працює, тепер переходжу до 17 уроку.
Автор, удалите этот урок, или перенесите в другое логически подходящее место в плейлисте. Этот урок приводит в тупик
Я три раза пересмотрел видео и три раза сделал всё один в один. Почти всё работает, но если нажать все и перезагрузить браузер, то запрос почему то не делается. Но нажать на другую категорию, запрос снова выполниться. Не понимаю... Но в любом случае спасибо)
Може пізніше це виправиться, бо в 17 уроку він це буде доробляти.
В 17 уроці це все зникло при перезагрузці)
У меня какой то неожиданный затуп.
Вот приложение загружается с корневого адреса '/', происходит проверка, подставляются стартовые данные и получаю пиццы,
далее я тыкаю на вторую категорию, делается запрос и получаю нормальный рендер,
далее я возвращаюсь на первую категорию и получаю такие параметры в URL '?currentPage=1&sortProperty=rating&categoryId=0' и нормальный рендер.
НО если я решу перезагрузить страницу с этими параметрами, то у меня не делается запрос и логично не грузятся пиццы, причем КеК в том что если я меняю через морду сайта любой параметр и так же обновляю стр, то все работает, все ломается исключительно на стоковых обнуленных параметрах)
пришел к такому-же результату. Пока не понял в чем проблема...
теперь при повторных обновлениях страницы будут всегда указаны те параметры что ты выбрал и сбросить их можно только изменив их вручную?
Ребята, у меня какая-то каша с юрл. Повторил как на видео, много ошибок в консоли. Что делать?
решил?
у меня было так потомучто много зависимостей оставил лишних
useEffect(()=>{
}, [МНОГО ЗАВИСИМОСТЕЙ ИХ НАДО УДАЛИТЬ])
а почему для проверки мы используем именно useRef?
Насколько я правильно понял, чтобы компонент не перерисовывался , поэтому используем хук useRef.
@@ЭдриаӇ̄
const params = false
или
const params = React.useRef(false)
В React разница между const params = false и const params = React.useRef(false) заключается в том, как эти значения обрабатываются и изменяются компонентом.
const params = false: Здесь params является просто переменной со значением false. При каждом рендере компонента, params будет иметь одно и то же значение false. Если вы попытаетесь изменить значение params напрямую, например, params = true, это вызовет ошибку, потому что вы не можете изменять значение переменной, объявленной с использованием const.
const params = React.useRef(false): Здесь params является объектом типа Ref, созданным с помощью React.useRef. useRef возвращает изменяемый объект, содержащий свойство .current. При каждом рендере компонента params остается неизменным, но вы можете изменять его свойство .current без вызова перерендера компонента. Например, params.current = true изменит значение, хранящееся в params, но компонент не будет перерисован. Это полезно, когда вам нужно сохранить значение между рендерами без вызова перерисовки.
Итак, если вам нужно иметь простое значение, которое будет обновляться и вызывать перерисовку компонента, используйте const params = useState(false). Если вам нужно сохранить значение без вызова перерисовки компонента при его изменении, используйте const params = useRef(false).
Почему в уроке ты решил не использовать хуки из React Router: useSearchParams для работы с параметрами и useLocation для проверки имеются ли параметры?
Такой же вопрос возник
А через классовый компонент если реализовать, где есть возможность разделить методы по componentDidMount и componentDidUpdate это имеет смысл реализовать, будет ли это короче?
интересно, перепроверил всё раз 5 (проверял всё с вложенного гиста) но у меня один фиг параметры вшиваются в ссылку при первом рендере ((
Отключите строгий режим.
Все сделал в точности по "видео", но трэшак начинается с момента, когда export sortList (который до этого назывался просто list) вставляешь в home на 11:20.
Примечательно, что в проекте откуда-то почему-то Sort становится const с использованием useMEmo, о котором не было в этом курсе до этого ни слова.
Делаешь такой все делаешь, правишь ошибки (потому что то и дело что-то не сходится), доходишь до проверки на 12:00 - в видосе все работает, у тебя не работает.
Заходишь в комменты - все воют, что видос был переписан но видать с места из будующих уроков, где на 12:00 идет явная нестыковка. И ты такой только изучил редакс и новую тему, видишь какие-то новые хуки, которых никогда не видел (useMEmO)и просто в ахуе от того, как это дальше смотреть и что делать
Сказать, что не хватает МАТОВ - нихуя не сказать
Оказалось, всего-то надо было удалить из индекса strict mode, беру свои слова назад! )
Спасибо за очередной крутой видос!) Но Юз Мемо прямо сбивает, кажется, что у тебя не из-за того, что у тебя что-то не так в проекте, а то, что в нем что-то уже переделано )
Два дня втуплял, думал что что то не так делаю ))) Спасибо @@Виктор-й2ф6р
сложнее редакса, столько всяких мелких действий