Как запустить async функцию внутри map?

Question

[art style]

{items.map((el) => {
        return (
          <>
            <div className={css.product}>
              <div className={css.productImage}>
                <img src={getImage(el.id)} />
              </div>
              <ProductGalleryLarge {...el}/>
            </div>
          </>
        );
      })}

хочу вот здесь <img src={getImage(el.id)} /> запустить асинхронную функцию которая добывает мне картинку превью
(функция получает картинку из firestorage поэтому прямых ссылок на картинки нет и вставить в объект нереал)
как это сделать?

Answer 1

[Alexandroppolus]

<img src={getImage(el.id)} /> поместить в отдельный реактовский компонент, например, StorageImage. Далее возможны различные варианты в зависимости от того, что используется на проекте. Наиболее простой - useQuery - это обеспечит кэширование и обновление стейта из коробки, и все остальные детали, прям вот всё что нужно для данного кейса.

Comments

[art style]

и что с ним дальше делать? на чистом реакте? потому что я пробовал так прокинуть через пропсы, эффект такой же, в img src=OBJECT PROMISE
через юзэффект и стейт чтоли?

[art style]

попробовал через эффект и стейт, работает, но с виду какаято дичь

[Alexandroppolus]

art style, на чистом решаете - да, эффект+стейт. Стейт - это конкретный url. В эффекте делаешь его загрузку. Пока загружается, этот урл пустой, и вместо картинки будет заглушка, например, лоадер. Это можно вынести в кастомный хук, чтобы компонент был читабельнее