[英]Rendering React components with promises inside the render method
我有一个组件,它获取一组项目作为道具并将它们map
到一组组件,这些组件被呈现为父组件的子组件。 我们使用存储在WebSQL
图像作为字节数组。 在map
函数中,我从项目中获取图像 Id 并对DAL
进行异步调用以获取图像的字节数组。 我的问题是我无法将承诺传播到 React,因为它不是为了处理渲染中的承诺而设计的(无论如何我都不能说)。 我来自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
已经存在,我不知道在哪里可以做到这一点。
render()
方法应该从this.props
和this.state
渲染 UI,所以为了异步加载数据,你可以使用this.state
来存储imageId: imageUrl
映射。
然后在你的componentDidMount()
方法,你可以填充imageUrl
从imageId
。 然后通过渲染this.state
对象, render()
方法应该是纯粹而简单的
注意this.state.imageUrls
是异步填充的,所以渲染出来的图片列表项会在获取到 url 后一一出现。 您还可以使用所有图像 ID 或索引(不带 url)初始化this.state.imageUrls
,这样您就可以在加载该图像时显示加载器。
constructor(props) {
super(props)
this.state = {
imageUrls: []
};
}
componentDidMount() {
this.props.items.map((item) => {
ImageStore.getImageById(item.imageId).then(image => {
const mapping = {id: item.imageId, url: image.url};
const newUrls = this.state.imageUrls.slice();
newUrls.push(mapping);
this.setState({ imageUrls: newUrls });
})
});
}
render() {
return (
<div>
{this.state.imageUrls.map(mapping => (
<div>id: {mapping.id}, url: {mapping.url}</div>
))}
</div>
);
}
或者你可以使用 react-promise :
安装软件包:
npm i react-promise
你的代码看起来像这样:
import Async from 'react-promise'
var items = this.props.items.map(function (item) {
var imageSrc = Utils.getImageUrlById(item.get('ImageId')); // <-- this contains an async call
return (
<Async promise={imageSrc} then={(val) => <MenuItem text={item.get('ItemTitle')} imageUrl={val}/>} />
);
});
编辑:2019 年 10 月
react-promise 的最后一次构建提供了一个名为usePromise
的钩子:
import usePromise from 'react-promise';
const ExampleWithAsync = (props) => {
const {value, loading} = usePromise<string>(prom)
if (loading) return null
return <div>{value}</div>}
}
完整文档: react-promise
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.