Получить и проверить данные перед рендерингом компонента
Исходный код: https://github.com/AbdelrhmanAmin/React-Dynamic-Routes-Manager
Проблема:
Чтобы проиллюстрировать проблему, возьмем, к примеру, профили пользователей.
Я бы определил динамические маршруты с параметром users/:userId
и отрисовал бы компонент профиля, а внутри компонента я бы получил userId
из useParams
, а внутри useEffect
я бы сделал запрос на выборку, чтобы получить информацию о пользователе.
Проблема в том, что userId
действительно может быть чем угодно. Это может быть 12
или hellomom
… Поскольку React делает все на стороне клиента, компонент страницы будет отображаться, даже если кто-то изменит URL-адрес на что-то недействительное, например, users/hilol
, или если кто-то попытается посетить URL-адрес профиля пользователя, который был удален. .
Конечно, хорошая структура важна, показывая индикатор загрузки в компоненте страницы во время выборки данных и сообщение об ошибке, если выборка не удалась. Но что, если мы сможем получить и проверить данные перед рендерингом компонента?
Мое решение
Я создал компонент менеджера, который отвечает за проверку правильности ответа на выборку, если это так, то визуализируйте компонент страницы или отобразите страницу 404.
Позвольте мне провести вас через код.
Сначала я бы обернул компонент страницы внутри компонента менеджера следующим образом:
Затем я бы передал менеджеру реквизит под названием fetcher
, который представляет собой функцию, которая получает параметры маршрута и возвращает запрос на выборку.
Первое, что произойдет, когда пользователь войдет на страницу, — это то, что менеджер выполнит первый useEffect, тот, который выполняет проверку. ТОЛЬКО если путь не находится внутри invalidRoutesRef
.
Примечание: это будет пусто при каждом монтировании, я рекомендую вам использовать контекст Redux или React для хранения
invalidRoutes
, чтобы избежать напрасной проверки маршрутов.
Причина, по которой я использовал
invalidRoutesRef
вместо простого использования флага типаisValid
, заключается в том, что после перехода к другому профилю я заметил, что значениеisValid
будет сохраняться как «false», таким образом, страница будет показывать 404, даже еслиuserId
действителен.
Функция начинается с установки isLoading
в значение true (подсказка: сделайте его истинным по умолчанию, чтобы отображался индикатор загрузки при первом рендеринге😄) и передает функции fetcher
params
маршрута и ждет, пока выборка разрешится.
isLoading
будет отображать экран загрузки во время выборки данных.
Если запрос не выполнен, нажмите pathname
на invalidRoutesRef
. Затем установите для isLoading
значение false.
Окончательно.
Я надеюсь, что это может принести вам пользу.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.