Как использовать async/await в функциях рендеринга React

В React функция рендеринга обычно предназначена для чистых синхронных операций. Однако в определенных сценариях вы можете столкнуться с необходимостью выполнения асинхронных задач внутри этой функции. В этой статье будет рассмотрено, как эффективно использовать синтаксис async/await в функции рендеринга.

Понимание проблемы

Как видно из вопроса, попытка использовать async/ await непосредственно внутри функции карты в функции рендеринга может привести к неожиданному поведению. Это связано с тем, что функция карты ожидает синхронных операций, и попытка выполнить асинхронные вызовы внутри нее может нарушить ход процесса рендеринга.

Отделение выборки данных от отображения

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

Асинхронная выборка данных в родительском компоненте

При таком подходе вы создаете родительский компонент (например, ParentThatFetches), отвечающий за выполнение асинхронных запросов и управление данными. Используя методы жизненного цикла или перехватчики, родительский компонент извлекает данные и сохраняет их в состоянии. Впоследствии родительский компонент условно визуализирует чисто функциональный дочерний компонент (например, Child), который получает извлеченные данные в качестве реквизита. ]

}

this.state = {};

this.state = {};

}

{this.state.data && (
  <Child data={this.state.data} />
)}

{data.map((x, i) => (

this.state = {};

Извлечение данных с помощью хуков

С появлением хуков в React извлечение данных можно еще больше упростить. Следующий фрагмент кода демонстрирует, как использовать перехватчики для асинхронной выборки данных и соответствующего обновления состояния:

const ParentThatFetches = () => {

useEffect(() => {

const getData = async () => { const resp = await fetch('some/url'); const json = ожидайте соотв.json() ОбновлениеДанных (JSON); } getData();

}, []);

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();