Question

我正在使用Firebase文档中的create-react-app创建类似汽车图片库的内容（react + redux + firebase）。图像信息存储在Firebase实时数据库中，但实际图像文件存储在Firebase存储中。在componentWillMount中，我调用了一个动作创建器来获取这些图像：

this.props.fetchCars();

在动作创建器中，此函数执行：

export function fetchCars() {
  return (dispatch, getState) => {
         carsRef.on('value', snapshot => {
          dispatch({
              type: FETCH_CARS,
              payload: snapshot.val()
          });
      });
  };
}

该调度发送到我的reducer并相应地更新状态。我的州看起来像这样：

{
cars: {
  make: "Toyota",
  model: "Vios",
  year: 2015,
  fileName: "cars1.jpg",
  fileFullPath: ""
  }
}

获取后，图像的完整URL尚不清楚（fileFullPath），因为fileName只是用户上传的文件名。因此，我必须使用Firebase存储来获取可下载的Url，以便将其放在<img />标记中：

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

然而，当我运行它时，它不起作用。第一次调度后，使用空fileFullPath从实时数据库中正确检索图像列表。第二次发货后，它仍然是空的。我想我这样做的方式有问题，但我不知道怎么做。

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

0 个答案: