Давайте создадим страницу "Рекомендуемые товары" с помощью API покупок.
В этой статье основное внимание будет уделено извлечению данных из API и отображению их в браузере. Это будет сделано с помощью React Hooks. Для простоты мы будем использовать API покупок, который я создал для этой статьи. Однако описанные здесь шаги могут применяться при извлечении и отображении данных из любого API, будь то сторонний API, такой как OMDb API, или ваш собственный.
Давайте посмотрим, чего мы будем добиваться. Представьте, что у нас есть веб-сайт со страницей рекомендуемых продуктов, на которой мы хотим отображать наши самые популярные продукты. Товары, отображаемые на странице, поступают из нашего API покупок. Итак, в конце концов, мы хотим создать страницу Featured Products, на которой будут показаны продукты, полученные из этого API:
Начиная
В этой статье предполагается, что у вас уже есть приложение React. Если вы этого не сделаете, просто запустите npx create-react-app my-app в терминале (заменив my-app именем вашего приложения), чтобы создать стартовый пакет React. Вы узнаете, что ваше приложение React было успешно создано, когда увидите слова «Удачного взлома!» в терминале.
Мы собираемся делать наши запросы Get с помощью Axios, так что давайте установим и его сейчас:
npm i axios
После этого запустите npm start, чтобы запустить приложение React. Вы должны увидеть это:
Начнем с создания нового файла с именем FeaturedProducts.js. Мы будем упрощать здесь задачу и просто создадим этот файл в папке src. А внутри FeaturedProducts.js мы начнем с очень простого функционального компонента, на данный момент только h1:
Теперь давайте импортируем это в наш App.js файл, где мы можем продолжить, а также удалить логотип и большую часть начального кода. Наш App.js файл должен выглядеть так:
И если мы посмотрим в браузере, мы должны увидеть наш h1:
Получение данных из API
Как упоминалось выше, мы будем использовать созданный мной простой API покупок. Данные включают шесть различных элементов, а также их цены, изображения, описания и т. Д. Не стесняйтесь использовать их для дальнейшего изучения.
Мы собираемся использовать хуки useState и useEffect, поэтому давайте начнем с импорта их в FeaturedProducts.js. Затем нам нужно создать переменную состояния (которую мы назовем products) и функцию, которая ее обновляет (которую мы назовем setProducts). Поскольку данные, которые мы будем получать, представляют собой один большой массив, products изначально будет установлен как пустой массив:
Затем мы воспользуемся Axios для получения данных из конечной точки URL, так что давайте продолжим и импортируем Axios. И мы создадим для этого функцию под названием fetchProducts. Итак, здесь мы сделаем axios.get(), который принимает нашу конечную точку URL (https://shoppingapiacme.herokuapp.com/shopping). Это URL-адрес нашего API покупок. Запрос Get возвращает обещание. Затем в блоке then мы регистрируем ответ. А если возникнет ошибка, мы запишем ее в блок catch:
Теперь, когда мы создали нашу fetchProducts функцию, мы будем использовать useEffect для ее вызова. Поскольку useEffect Hook всегда вызывается при первом рендеринге, нам нужно поместить нашу fetchProducts функцию внутрь useEffect, чтобы она вызывалась при загрузке страницы. В противном случае наша функция не будет вызвана, и наши данные не будут извлечены. Итак, теперь, когда наша страница загружается, наши данные будут извлечены.
Чтобы предотвратить выполнение useEffect Hook в бесконечном цикле (из-за того, что он запускается после каждого рендеринга и каждого обновления по умолчанию), мы передаем пустой массив в качестве второго аргумента useEffect. Таким образом, наш useEffect Hook будет запускаться только после первого рендеринга, даже если состояние компонента обновлено:
Если мы посмотрим в консоль, мы увидим, что мы успешно получили данные из нашего API:
Чтобы отобразить эти данные, нам нужно передать эти данные в нашу setProducts функцию, чтобы мы могли установить наше состояние на данные. Как вы можете видеть в консоли, нам нужно использовать data (выделено на скриншоте) для доступа к этим данным. Итак, давайте продолжим и добавим setProducts(res.data) в нашу fetchProducts функцию внутри блока then:
Отображение данных
Теперь, когда мы получили данные, мы готовы отобразить их на странице. Итак, в нашем return, давайте создадим div для наших продуктов. И мы дадим ему className из item-container (мы добавим несколько базовых стилей, чтобы у нас было что-то более интересное). Теперь мы возьмем наши products (полученные данные), map через них и вызовем каждый элемент product (имя, которое мы будем использовать для каждого элемента при рендеринге конкретных свойств, которые мы хотим отобразить). Затем мы поместим каждый из этих продуктов в карточку div с className равным card, которую мы будем использовать для создания нескольких очень простых карточек:
Давайте теперь добавим наши стили. Мы можем просто избавиться от всего в App.css и добавить туда наши стили. Мы также сосредоточим наш h1 (что касается img, мы скоро к этому вернемся):
Теперь все, что нам нужно сделать, это вывести наши данные на экран. Если мы посмотрим на один из элементов в консоли, мы увидим, что у нас есть доступ к бренду, цвету, описанию, идентификатору, изображению, элементу и цене:
Для наших карточек давайте отобразим товар, бренд и изображение. Чтобы отобразить их, мы просто пишем product (имя, которое мы выбрали выше для каждого элемента), а затем то, что мы хотим отобразить (например, product.item):
И вот так. Теперь наши продукты отображаются на странице:
Однако вы заметите, что в консоли появляется предупреждение: У каждого дочернего элемента в списке должна быть уникальная опора« ключ ». Если мы посмотрим на документацию React, то увидим, что ключ - это специальный строковый атрибут, который необходимо включать при создании списков элементов.
«Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Ключи должны быть отданы элементам внутри массива, чтобы придать элементам стабильную идентичность ».
Чтобы решить проблему с отсутствующим ключом, мы назначим ключ нашей основной карте div. Чаще всего в качестве ключа используется идентификатор из данных, поэтому мы и будем использовать его здесь. Если визуализированные элементы не имеют стабильных идентификаторов, индекс элемента может использоваться в крайнем случае, хотя это не рекомендуется. Для получения дополнительной информации обратитесь к документации React по спискам и ключам.
Теперь ошибка исчезла:
Когда мы закроем консоль, мы увидим нашу страницу рекомендуемых продуктов с нашими продуктами:
Заключение
Итак, поехали. Мы получили данные из нашего API с помощью React Hooks и Axios и отобразили их на экране. В части 2 мы продолжим работу с данными, которые у нас есть, и настроим динамическую маршрутизацию, чтобы мы могли отображать каждый элемент динамически на отдельной странице. Будьте на связи.
Окончательный код
Окончательный код для FeaturedProducts.js:
Окончательный код для App.js:
Окончательный код для App.css:
