У меня есть компонент, который получает набор элементов как реквизит и map
их в набор компонентов, которые отображаются как дочерние элементы родительского компонента. Мы используем изображения, хранящиеся в WebSQL
как массивы байтов. Внутри функции map
я получаю идентификатор изображения из элемента и делаю асинхронный вызов DAL
, чтобы получить массив байтов для изображения. Моя проблема заключается в том, что я не могу распространять обещание в React, поскольку оно не предназначено для обработки promises в рендеринге (не так далеко, насколько я могу сказать). Я пришел из фона C#
, поэтому, я думаю, я ищу что-то вроде ключевого слова await
для повторной синхронизации разветвленного кода.
Функция map
выглядит примерно так: (/) >
var items = this.props.items.map(function (item) {
var imageSrc = Utils.getImageUrlById(item.get('ImageId')); // <-- this contains an async call
return (
<MenuItem text={item.get('ItemTitle')}
imageUrl={imageSrc} />
);
});
и метод getImageUrlById
выглядит следующим образом:
getImageUrlById(imageId) {
return ImageStore.getImageById(imageId).then(function (imageObject) { //<-- getImageById returns a promise
var completeUrl = getLocalImageUrl(imageObject.StandardConImage);
return completeUrl;
});
}
Это не работает, но я не знаю, что мне нужно изменить, чтобы сделать эту работу. Я попытался добавить еще одно обещание в цепочку, но потом я получаю сообщение об ошибке, потому что моя функция рендеринга возвращает обещание вместо законного JSX. Я думал, что, возможно, мне нужно использовать один из методов жизненного цикла React
для извлечения данных, но поскольку мне нужно, чтобы props
уже был там, я не могу понять, где я могу это сделать.