Javascript 渲染会在渲染方法中使用承诺对组件进行反应
我有一个组件,它获取一组项目作为道具,并将它们映射到一组组件,这些组件作为父组件的子组件呈现。我们使用存储在Javascript 渲染会在渲染方法中使用承诺对组件进行反应,javascript,reactjs,q,Javascript,Reactjs,Q,我有一个组件,它获取一组项目作为道具,并将它们映射到一组组件,这些组件作为父组件的子组件呈现。我们使用存储在WebSQL中的图像作为字节数组。在map函数中,我从项中获取图像Id,并对DAL进行异步调用,以获取图像的字节数组。我的问题是,我无法将承诺传播到React中,因为它不是为处理呈现中的承诺而设计的(无论如何,我也说不上来)。我来自C#的背景,所以我想我正在寻找类似wait的关键字来重新同步分支代码 map函数如下所示(简化): 这不起作用,但我不知道需要修改什么才能使它起作用。我尝试向链
WebSQL
中的图像作为字节数组。在map
函数中,我从项中获取图像Id,并对DAL
进行异步调用,以获取图像的字节数组。我的问题是,我无法将承诺传播到React中,因为它不是为处理呈现中的承诺而设计的(无论如何,我也说不上来)。我来自C#
的背景,所以我想我正在寻找类似wait
的关键字来重新同步分支代码
map
函数如下所示(简化):
这不起作用,但我不知道需要修改什么才能使它起作用。我尝试向链中添加另一个承诺,但随后出现了一个错误,因为我的呈现函数返回的是一个承诺,而不是合法的JSX。我在想,也许我需要利用React
生命周期方法中的一种来获取数据,但是由于我需要props
已经存在,所以我不知道在哪里可以做到这一点。render()
方法应该从this.props
和this.state
,呈现UI,因此,要异步加载数据,可以使用this.state
存储imageId:imageUrl
映射
然后在componentDidMount()
方法中,可以从imageId
填充imageUrl
。然后,通过呈现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>
);
}
构造函数(道具){
超级(道具)
此.state={
ImageURL:[]
};
}
componentDidMount(){
this.props.items.map((item)=>{
getImageById(item.imageId)。然后(image=>{
常量映射={id:item.imageId,url:image.url};
const newUrls=this.state.imageUrls.slice();
推送(映射);
this.setState({imageUrls:newUrls});
})
});
}
render(){
返回(
{this.state.imageUrls.map(映射=>(
id:{mapping.id},url:{mapping.url}
))}
);
}
或者您可以使用:
安装软件包:
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}/>} />
);
});
完整文档:谢谢!这就成功了。我在这里唯一要做的更改(至少供我使用)是在
componentWillMount
中执行此操作,而不是在componentDidMount
中执行此操作,以避免出现初始的“空”渲染componentWillMount
在初始呈现之前运行。@Wint此行有错误:var newUrls=self.state.imageUrls.slice().push(mapping)
,因为返回的值不是数组的浅层副本,而是新数组的长度。请看@Wint,非常新的反应,所以请原谅我的理解不足,但我有几个问题:(1)这似乎是一个性能地雷。react对计时器或缓存是否友好,以便在以后的迭代中减少克隆阵列的时间?(在Ember中,我们有要调度的运行循环,不确定React中是否有等效的循环)(2)这似乎会按照异步操作完成的顺序返回一些内容。你有没有建议一些维护秩序的策略?
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}/>} />
);
});