Некоторые мысли о проекте 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 будет думать, что он получил те же данные, и не изменит состояние.

Вот и все, что касается этого сообщения в блоге, я, безусловно, многому научился, работая над этим проектом, и эти две проблемы, которые я упомянул выше, — это всего лишь две очень интересные темы, которые, как я подумал, было бы хорошо записать для меня в будущем или других людей, которым могут понадобиться некоторые помощь.

Спасибо за прочтение, берегите себя!