Немного опоздал на вечеринку, но я недавно (как и вчера) изучил хуки, которые были введены в реакцию, начиная с версии 16.8. В настоящее время я работаю над проектом Javascript MERN и хотел использовать эти новые хуки спереди и общаться с экспресс-сервером сзади.

Я подумал, что было бы неплохо быстро пройтись по моему пониманию хуков реакции, в частности useState и useEffect, и того, как я успешно реализовал их (возможно, не самым чистым способом) в моем текущем проекте. (Примечание: это нацелено на тех, кто уже разбирается в React и просто сосредотачивается на фронте)

Для некоторого контекста, часть приложения, которую я буду рассматривать, представляет собой просто индексную страницу, которая использует асинхронный вызов axios для получения списка товаров, хранящихся в mongodb.

Итак, во-первых, у нас есть магия useState, которая работает очень аналогично состоянию, как вы, возможно, знали ранее. Это позволяет вам сохранять состояние функционального компонента, в отличие от компонентов класса (на самом деле вы не можете использовать хуки непосредственно внутри компонента класса).

Чтобы использовать useState, вы просто импортируете его из response.

useState возвращает пару; текущее значение состояния и функция, позволяющая его обновить. Единственный аргумент, который вам нужно установить, - это начальное состояние.

В моем примере проекта allItems - это состояние. Его начальным значением в настоящее время является массив пустого объекта.
addItem - это функция, которая при вызове позволяет мне обновлять состояние allItems ( в этом случае извлекает объекты покупок из базы данных и добавляет каждый объект в массив allItems).
Функцию addItem можно вызывать практически в любом месте, например, в обработчике событий (нажатие кнопки, прокрутка страницы и т. д. ), но теперь я хочу показать вам, как я объединил функцию вместе с другим хуком реакции; useEffect.

В этом примере я использую useEffect почти так же, как ранее использовался componentDidMount. Как вы видели выше, он импортируется так же, как useState.

Идея моего приложения заключается в том, что при монтировании этого конкретного функционального компонента ItemIndex я хочу, чтобы он извлекал данные из базы данных и добавлял их в состояние allItems.

Таким образом, это будет useEffect (on mount) = ›axios get request =› вызывает addItem function = ›получает данные и добавляет их в состояние allItems.

Я надеюсь, что это не будет выглядеть как пример Нарисуйте остальную чертову сову, но я просто собираюсь показать вам свой код ниже и надеюсь может объяснить это достаточно хорошо, чтобы понять:

В этом примере вы можете увидеть, как useEffect создает функцию fetchItems, которая является асинхронным вызовом базы данных. Мы ждем, пока будет получен ответ (когда он сможет получить данные из базы данных), и присваиваем его постоянной переменной response. Как только этот вызов будет выполнен, вы увидите, что выполняется функция addItem в useState (строка 10), которая просто берет данные из ответа и сохраняет их как allItems значение состояния.

Возможно, вас немного смущает, почему я создал асинхронную функцию в useEffect. НУ, как я обнаружил, у вас не может быть асинхронного вызова непосредственно в useEffect, иначе вы получите сообщение об ошибке примерно такого рода:

Предупреждение: функция useEffect должна возвращать функцию очистки или ничего. Промисы и useEffect (async () = ›…) не поддерживаются, но вы можете вызвать асинхронную функцию внутри эффекта.

Функция fetchItems вызывается в строке 12, так что когда компонент монтируется, функция для захвата данных фактически запускается.

Вы также заметите, что в строке 13 есть пустой массив. Это необязательный второй аргумент (подробнее о котором вы можете прочитать здесь), однако в данном случае это в основном означает, что useEffect будет запускаться только при монтировании компонента.

Наконец, что касается остальной части совы, вот оставшаяся часть кода для моей страницы ItemIndex, проходящая через массив allItems и возвращающая объекты на передний план: