React Router - помилки та код рев'ю
2022 ж. 22 Жел.
923 Рет қаралды
✍️ Під час цього код рев'ю ми розберемо простий застосунок з React Router-ом, подивимось на типові помилки та спробуємо їх виправити.
❓ Відео може бути цікаве початківцям та тим, хто вивчає React Router Dom версії 6.4+
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
💡Всі матеріали курсу: github.com/Drag13/react-learn...
Дякую за 12:30, бо я для вводу по ентеру писав окрему функцію))
Дякую за відео. Підскажіть, чому коли я отримую данні курсів так: export const fetchCourseData = () => { const [data, setData] = useState(); useEffect(() => { const getCourseData = async () => { try { const response = await fetch( "посилання на файл з курсами" ); if (response) { const data: CourseData = await response.json(); setData(data.lessons); } } catch (err) { throw new Error(); } }; getCourseData(); }, []); return data; }; то з'являється помилка: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. А коли отримую данні через свій файл json, то роутінг працює нормально
Ви цей код в loader функції використовуєте? Якщо так, то хуки в loader функції використовувати не можна
Так через loader. А яким чином можливо вирішити цю проблему?
А як з'явився випадаючий список того, що повертає useNavigation()? На 40:06
Хук useNavigate возвращает функцию, которая позволяет промисной функции выводить данные из fakeLessons[{}], просто хлопцы мы передаем состояние в качестве первого аргумента для функции навигации.Объяснил как мог, если что не так поправьте...
@@sevgenberg585 я питав про інше - як з'явився випадаючий список на 40:06
В VsCode є шорткат CTRL + Space який видає отакі підказки
@@reactdev 🔥дякую!!!
В версии 6 исчез реквизиты функций рендеринга дочерних элементов?Исчезли реквизиты маршрута, то есть история, местоположение и совпадение, поэтому нам нужен хук useNavigate, чтобы получить функционал навигации в поиске?Насколько я могу судить, летом вроде, была старая версия роутера, если я не путаю где поиск элементов мог рендерится маршрутом только для того, чтобы объект истории передавался в качестве реквизита. Я не вижу причин для его рендеринга с помощью Route. Можно просто визуализируйте поиск прямо в заголовке и все!
Мы еще можем улучшить форму поиска, добавив role="search". Это заставит программы при чтения с экрана объявить, что это форма поиска. И, возможно, наличие type="search" в элементе ввода может помочь браузеру немного изменить его стили и добавить иконку x. Alert() лучше не использовать т.к. это блокирующая операция. она блокирует весь браузер, поток javascript,печатает только строки,требуется взаимодействие с пользователем (это означает, что вы не можете автоматизировать использование браузера),блокируется обычными блокировщиками всплывающих окон,например ABPне работает в небраузерных средах, таких как node.js (однако console.log работает в node.js нормально). Лучше заменить на консоль лог!
Мне кажется абстрактное название к методу Search подходило больше. Название метода Search не очевидно что должно менять параметры урла, менять внешний вид приложения и возможно в будущем будет расширено еще некоторыми сайд эффектами.