Image 从Firebase实时数据库加载图像+;存储

Image 从Firebase实时数据库加载图像+;存储,image,reactjs,firebase,redux,Image,Reactjs,Firebase,Redux,我正在使用Firebase文档中的create react应用程序(react+redux+Firebase)创建类似于汽车图像库的东西。图像信息存储在Firebase实时数据库中,但实际图像文件存储在Firebase存储中。在componentWillMount中,我调用了一个动作创建者来获取这些图像: this.props.fetchCars(); 在action creator中,此函数执行: export function fetchCars() { return (dispatc

我正在使用Firebase文档中的create react应用程序(react+redux+Firebase)创建类似于汽车图像库的东西。图像信息存储在Firebase实时数据库中,但实际图像文件存储在Firebase存储中。在componentWillMount中,我调用了一个动作创建者来获取这些图像:

this.props.fetchCars();
在action creator中,此函数执行:

export function fetchCars() {
  return (dispatch, getState) => {
         carsRef.on('value', snapshot => {
          dispatch({
              type: FETCH_CARS,
              payload: snapshot.val()
          });
      });
  };
}
该调度将转到我的减速机,并相应地更新状态。我的状态是这样的:

{
cars: {
  make: "Toyota",
  model: "Vios",
  year: 2015,
  fileName: "cars1.jpg",
  fileFullPath: ""
  }
}
获取后,图像的完整URL还不知道(fileFullPath),因为文件名只是用户上传的文件名。因此,我必须使用Firebase存储来获取可下载的Url,以便将其放入
标记中:

export function getFileFullPath(){
    return (dispatch, getState) => {
     var newState = Object.assign({}, getState());
     var imgRef, carUrl;
     _.map(newState.cars, (car, index) => {
       imgRef = storageRef.child('images/'+car.img);
       carUrl = imgRef.getDownloadURL().then( url => {
            car.fileFullPath=url;
       });
     });

     dispatch({
         type: FILL_UP_URL,
         payload: newState.cars
     });
    };
}
但是,当我运行这个时,它不起作用。第一次发送后,图像列表从实时数据库中正确检索,文件完整路径为空。第二次发送后,它仍然是空的。我想我这样做是有问题的,但我不知道怎么做