如何从firebase存储获取react.js的异步图像数据？

Question

请告诉，如何把数据放回队列返回数组。由于组件渲染速度比firebase快，因此发送数据。

来自此代码的片段（终极版的）

function fetchPosts(key) { 
return dispatch => { 
    dispatch(requestPosts(key)) 
    return database.ref('article/').once('value', snap => { 
     let childData = [] 
     snap.forEach(function(child) { 
      getImage(child.val().thumb).then((url) => { 
       console.log(url) 
       return { 
        "id": child.key, 
        "url": url, 
        ...child.val() 
       } 
      }).then((array) => { 
       console.log(array) 
       childData.push(array) 
      }) 
     }) 
     dispatch(receivePosts(key, childData)) 
    }) 
    .catch((error) => { 
     console.log(error) 
     dispatch(receivePosts(error)) 
    }) 
} 

}

Answer 1

你需要等待所有单元的反应，就像这样：

// Boilerplate start --- 
 

 
function getImage(thumb) { 
 
    return new Promise((resolve) => { 
 
    setTimeout(() => resolve(thumb + ' url'), Math.random() * 500); 
 
    }); 
 
} 
 

 
function Child(key, value) { 
 
    this.key = key; 
 
    this.value = value; 
 
} 
 

 
Child.prototype.val = function() { 
 
    return this.value; 
 
} 
 

 
function receivePosts(key, childData) { 
 
    return {key, childData}; 
 
} 
 

 
function dispatch(action) { 
 
    console.log(action); 
 
} 
 

 
snap = [ 
 
    new Child('key1', {thumb: 'thumb1'}), 
 
    new Child('key2', {thumb: 'thumb2'}), 
 
    new Child('key3', {thumb: 'thumb3'}), 
 
    new Child('key4', {thumb: 'thumb4'}), 
 
    new Child('key5', {thumb: 'thumb5'}), 
 
    new Child('key6', {thumb: 'thumb6'}), 
 
    new Child('key7', {thumb: 'thumb7'}), 
 
    new Child('key8', {thumb: 'thumb8'}) 
 
]; 
 

 
// Boilerplate end --- 
 

 
function insideDatabaseRefOnce(key) { 
 
    return Promise.all(snap.map(function(child) { 
 
    return getImage(child.val().thumb).then((url) => { 
 
     return { 
 
     "id": child.key, 
 
     "url": url, 
 
     ...child.val() 
 
     } 
 
    }); 
 
    })).then((childData) => { 
 
    dispatch(receivePosts(key, childData)) 
 
    }); 
 
} 
 

 
insideDatabaseRefOnce('The key');