Получить и проверить данные перед рендерингом компонента

Исходный код: 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.