在呈现方法中渲染React具有承诺的组件

问题描述：

我有一个组件，它获取作为道具的项目集合以及map将它们呈现为作为父组件的子项呈现的组件集合。我们使用WebSQL中存储的图像作为字节数组。在map函数中，我从该项目获取图像标识并对DAL进行异步调用，以获取图像的字节数组。我的问题是，我不能将这个承诺传播给React，因为它不是用来处理渲染中的承诺（反正我不能说）。我来自C#背景，所以我想我正在寻找类似await关键字的重新同步分支代码。在呈现方法中渲染React具有承诺的组件

的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。我在想，也许我需要利用其中一种生命周期方法获取数据，但由于我需要props已经在那里，所以我无法弄清楚我可以在哪里做到这一点。

答

render()方法应该从this.props和this.state渲染UI，以便异步加载数据，您可以使用this.state来存储imageId:imageUrl映射。
然后在您的componentDidMount()方法中，您可以从imageId填充imageUrl。然后render()方法应该是通过渲染this.state对象

下面是一个简单的示例代码单纯和简单：
注意，this.state.imageUrls异步填充，所以以后它的URL是渲染图像列表项将一一呈现牵强。您还可以使用所有图像ID或索引（不包含URL）初始化this.state.imageUrls，这样您可以在加载该图像时显示加载程序。

好的，点了。你有什么机会展示一个例子？ –

谢谢！那就是诀窍。我唯一要改变的地方（至少对我来说是这样）是在'componentWillMount'而不是'componentDidMount'中执行这个操作，以避免初始的“空白”渲染。 'componentWillMount'在初始渲染之前运行。 –

@Wint这行有一个错误：'var newUrls = self.state.imageUrls.slice（）。push（mapping）'，因为返回的值不是数组的浅表副本，而是新数组的长度。参见[Array.prototype.push（）]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push#Syntax） – jherax

答

或者你可以简单的使用作出反应，承诺：

安装软件包：

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}/>} />  
    ); 
});

全部文档： https://github.com/capaj/react-promise

在呈现方法中渲染React具有承诺的组件

相关推荐