在呈現方法中渲染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已經在那裏，所以我無法弄清楚我可以在哪裏做到這一點。

來源

2015-10-20 Elad Lachmi

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，這樣您可以在加載該圖像時顯示加載程序。

來源

2015-10-20 17:16:48 Wint

好的，點了。你有什麼機會展示一個例子？ –

謝謝！那就是訣竅。我唯一要改變的地方（至少對我來說是這樣）是在'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

來源

2017-07-06 08:30:35

在呈現方法中渲染React具有承諾的組件

回答

相關問題