Некоторые мысли о проекте Foods Nutrition
Во время планирования данных, используемых в этом проекте, я наткнулся на список различных продуктов с их калорийностью на 100 граммов, я вспомнил, когда сидел на диете, и пытался искать калории продуктов в Интернете. Я подумал, что было бы неплохо создать приложение, показывающее, сколько калорий содержат некоторые распространенные продукты, а также белки, жиры, углеводы и т. д.
По сути, этот проект создает приложение с использованием React и отображает некоторые распространенные продукты на странице в виде отдельной карты, пользователь может очень легко распознать каждый продукт по его изображению. Каждая карточка питания содержит информацию о том, сколько калорий, белков, жиров и углеводов приходится на 100 грамм. Карточки продуктов также можно фильтровать по категориям (фрукты, орехи, овощи…). Пользователь также может искать конкретную еду, вводя ее название. И самое приятное то, что эти продукты можно сортировать по убыванию или возрастанию по калориям, белкам, жирам или углеводам на 100 граммов. И последнее, но не менее важное: пользователи могут отправить свою любимую еду, указав название еды, URL-адрес изображения вместе с другой информацией, и вновь отправленная еда будет сохранена в бэкэнде.
Одна проблема, с которой я столкнулся при создании этого проекта, заключается в том, как манипулировать вложенными объектами с помощью оператора распространения. Для простого объекта мы можем просто изменить одно из значений, выполнив следующие действия:
const object = {key1: value1, key2: value2} const newObject = {...object, key1: newValue}
А как насчет такого вложенного массива:
const object = {key1: value1, key2: {key3: value3}}
Как мы можем изменить значение для key3? На самом деле, мы можем рассматривать внутренний объект как новый объект и изменять его с помощью оператора расширения, а затем использовать оператор расширения для изменения внешнего объекта:
const object = {key1: value1, key2: {key3: value3}} const newInnerObject = {...object[key2], key3: newValue} const newObject = {...object, newInnerObject}
Мы также можем объединить вторую и третью строки кода:
const object = {key1: value1, key2: {key3: value3}} const newObject = {...object, key2: {...object[key2], key3: newValue}}
Таким образом, мы можем изменить значение вложенного объекта с помощью оператора распространения.
Еще одна вещь, о которой я хотел бы поговорить, — это как создать кнопку для сортировки вещей, действие которой по умолчанию — сортировка по убыванию, а при нажатии — изменение для сортировки по возрастанию.
Во-первых, нам нужно создать состояние для хранения значения по умолчанию false и создать кнопку, которая имеет свойство onClick и условно отображает другой текст:
<button onClick={handleIsAscending}> {isAscending ? "Sort Ascending" : "Sort Descending"} </button>
Далее нам нужно создать функцию handleIsAscending, обрабатывающую действие щелчка:
function handleIsAscending() { isAscending ? handleSortAscending() : handleSortDescending() setIsAscending((isAscending) => !isAscending)
Эта функция вызовет либо функцию handleSortAscending, либо функцию handleSortDescending на основе значения isAscending, и после вызова функции обратного вызова изменит значение isAscending на противоположное, чтобы в следующий раз она вызывала другую функцию.
Наконец, давайте определим наши функции handleSortAscending и handleSortDescending. В основном они имеют одинаковую структуру с ключевым отличием:
function handleSortAscending() { const sortedFoods = [...foods].sort((a, b) => a - b) setFoods(sortedFoods) } function handleSortDescending() { const sortedFoods = [...foods].sort((a, b) => b - a) setFoods(sortedFoods) }
Для простоты предположим, что переменная food представляет собой массив из двух чисел, при таком предположении приведенный выше код может сортировать массив food по возрастанию и убыванию. Обратите внимание, что нам нужно использовать […foods].sort вместо food.sort, так как позже нам нужно будет установить состояние с помощью переменной sortedFoods, и если мы используем food.sort, React будет думать, что он получил те же данные, и не изменит состояние.
Вот и все, что касается этого сообщения в блоге, я, безусловно, многому научился, работая над этим проектом, и эти две проблемы, которые я упомянул выше, — это всего лишь две очень интересные темы, которые, как я подумал, было бы хорошо записать для меня в будущем или других людей, которым могут понадобиться некоторые помощь.
Спасибо за прочтение, берегите себя!