Реакция часть 13

СЕГОДНЯ мы поговорим о параметре Router и очистке useEffect.

Параметры маршрутизатора:

Таким образом, мы можем получить параметры из URL-адреса с параметрами маршрута,

localhost:3000/blogs/2 ←этот парень

Это что-то вроде переменной, которую мы можем использовать позже.

Во-первых, давайте создадим BlogDetail в папке src, а затем заполним его простыми данными, такими как console.log, чтобы убедиться, что он подключается. (всегда делайте это всегда и везде, как только вы поймете, что это связано, тогда двигайтесь дальше — -›)

Не забудьте импортировать его, что я сделал в строке 6, а затем скопируйте и вставьте другой компонент Route, как в строке 22–24. Маршрут принимает путь, и этот путь должен быть «/blogs/:id», который, когда вы идете туда, отображает компонент ‹BlogDetail/›, который отображается в строке 23. Примечание: когда мы помещаем «blogs/:id», например это, мы можем передать аргумент позже. Таким образом, мы действительно можем изменить этот маршрут туда, куда мы передаем идентификатор\.

если мы проверим браузер, вы увидите, что мы переходим на localhost: 3000/blogs/4, и он отображает детали блога-4. Который я покажу, как мы сделали это в данный момент.

Далее, как мы получили этот идентификатор из URL-адреса? мы использовали такой крючок:

В строке 5 мы устанавливаем переменную в id, которая соответствует функции useParams. Это позволяет нам получить параметры маршрута из URL-адреса. Мы также деструктурируем id, мы называем его id, потому что это то, что мы использовали в «Маршруте» в app.js.

Наконец, мы используем фигурные скобки и передаем id, как мы показываем id в браузере!

затем мы хотим добавить ссылки к каждому посту блога или элементу, который извергается. Каждый из них будет иметь div, ссылку и идентификатор сообщения в блоге. Типа Су:

Не забудьте импортировать ссылку из маршрутизатора, что я делаю в строке 2!

По сути, мы устанавливаем эту ссылку для перехода к нашему новому маршруту, который мы создали с помощью In App.js. мы используем некоторые обратные тики `/blogs/${blog.id}`, убедитесь, что мы можем интерполировать (если вы не знаете, что это такое, ${} позволяет нам передавать данные в эту строку, также известную как интерполяция строк.)

Если вы зайдете в браузер и нажмете на ссылки, вы сможете перейти к любой детали блога с этим конкретным идентификатором.

Хорошо, двигаясь дальше, я хочу рассказать кое-что о «Разгроме» прямо сейчас, о чем я забыл упомянуть в прошлом уроке…..

Никогда не поздно, тогда извини!!!

Очистка useEffect:

Теперь давайте быстро рассмотрим, как прерывать вызовы fetch внутри вызова fetch внутри useEffect!

ДАВАЙТЕ ГОООООО!!

ОК, если вы получите эту ошибку, которая произойдет у большинства из вас, если вы быстро переключитесь между ссылками на панели навигации или где-то еще. По сути, это кричит на вас, потому что вы пытаетесь продолжить вызов извлечения в фоновом режиме, пытаясь слишком быстро переключиться между «домашней» страницей и «добавить блог». Домашняя страница все еще пытается обновить состояние, в то время как вы пытаетесь перейти в другое место в браузере!

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

Зайдите в свой UseFetch.js и давайте начнем здесь:

Все, что нам нужно сделать, это вернуть функцию в useEffect, которую мы делаем в строке 34 (для начала всегда делайте console.log(«abort») всегда навсегда, чтобы убедиться, что все подключено!) что console.log «прерывается» дважды, когда вы быстро переключаетесь между ссылками.

Давайте изменим некоторые вещи, как я сделал выше, по большей части мы останемся внутри хука полезного эффекта. В строке 9 мы добавляем новую переменную с именем abortCont (вы можете назвать ее как угодно). Для этого используется «новая» функция AbortController(), которая, по сути, дает вам возможность отменять действия! (Примечание: мне пришлось добавить «окно» к моему, чтобы оно работало в браузере… В большинстве случаев вам это может не понадобиться.)

Теперь мы можем использовать эту функцию в вызове выборки и использовать эту переменную для остановки выборки, строка 12:

Мы делаем все это, добавляя второй аргумент в вызове выборки, который является параметром для выборки, но выглядит как объект, ха-ха.

Есть сигнальный ключ со значением abortCont.signal, вот и все. Теперь у нас есть СИЛА!

Мы передаем это в функцию внизу, а затем возвращаемся, если страница прерывается в последнюю секунду:

В строке 34 мы всего лишь возвращаем анонимную функцию abortCont.abort(), которая приостановит выборку, если вы отклонитесь от сайта во время вызова выборки.

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

Функция .catch что-нибудь поймает. он видит Abort, который является кодом ошибки, поэтому он видит его и все еще портит ваши планы. Он также обновляет состояние для состояния ошибки и состояния загрузки. Мы все еще обновляем состояние, может быть, не данные, но с ошибками, которые мы!

Вот как мы работаем с этим, с прекрасным оператором If, который говорит, ЕСЛИ есть AbortError, то через consoleo.log и ничего не обновляет состояние, иначе setError и setLoading, как обычно.

Это должно все исправить.

Хорошо, мне нравится держать их в обучении размером с укус, потому что, когда я начал, я был ошеломлен. Так что удачи, надеюсь, вы что-то узнали. Проверьте мои другие вещи ниже.

Реагировать…

React часть 1 (Как запустить приложение React)

React часть 2 (компоненты и динамические значения)

React часть 3 (Несколько компонентов и небольшая стилизация)

React, часть 4 (кликайте по событиям с помощью функций и инструментов для разработки React)

React часть 5 (ссылка на: хук useState и как выводить списки в React)

React часть 6 (Реквизит и многоразовые компоненты)

React часть 7 (передача функций в качестве реквизита и использование хука эффекта)

Реакция, часть 8 (продолжение с хуком useEffect, зависимостями с useEffect и настройкой сервера JSON для выборки)

React часть 9 (Извлечение данных с помощью JSON)

React часть 10 (полоса загрузки и ошибки выборки)

React часть 11 (кастомные хуки)