render()方法应该从渲染UI
this.props和
this.state,所以异步加载数据,则可以使用
this.state存储
imageId: imageUrl的映射。
然后,在您的
componentDidMount()方法中,您可以
imageUrl从填充
imageId。然后,
render()通过渲染
this.state对象,
该方法应该是纯粹而简单的
请注意,
this.state.imageUrls异步填充了,因此渲染的图像列表项在获取其网址后将一一显示。您还可以
this.state.imageUrls使用所有图片ID或索引(不带网址)初始化,这样您可以在加载图片时显示加载器。
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> );}


