Question

我正在尝试从Firebase Firestore映射我的架构。我使用Flamelink作为无头CMS来简化事情，但是我面临着局限性。

图像存储位置与我从架构中提取的数据分开。为了解决这个问题，我创建了一些嵌套查询，以查找存储位置的正确路径并生成图像的URL。我需要将该图像URL放回受尊敬的对象中的某个位置。

目前，它只是将其添加到整个数组中，而不是已包含在其中的对象。第一个控制台日志是文件引用的正确顺序，第二个控制台日志是我需要输入原始对象的正确URL。但是，这些似乎顺序不正确。我对ES6的反应是相当陌生的，因此我可能会使事情复杂化。本质上，我只想将第二个Console.log的输出放到我在各自位置中每个对象的ThumbnailURL位置。

我试图创建一个新的对象数组并在前端映射它们，但是由于它们不在同一个对象中，因此会引起问题。

const storage = firebase.storage().ref('flamelink/media/sized/240/')

class ContentUpdates extends React.Component {
  constructor(){
    super();
    this.ref = firebase.firestore().collection('fl_content').where('_fl_meta_.schema', '==', 'collateral');
    this.unsubscribe = null;
    this.state = {
      collateral: [],
    }
  }

  onCollectionUpdate = (querySnapshot) => {
    const collateral = [];
    querySnapshot.forEach((doc) => {
      const { name, image, thumbnail, thumbnailURL, img} = doc.data();
      collateral.push({
        key: doc.id,
        doc, // DocumentSnapshot
        name,
        image,
        img,
        thumbnail: image[0].id,
        thumbnailURL: firebase.firestore().collection(`fl_files`).where(`id`, '==', `${image[0].id}`).get().then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            const { file } = doc.data();
            console.log('this is in the correct order', `${file}`);
            storage.child(`${file}`).getDownloadURL().then((url) => {
              const fileurl = url
              console.log('this is the value I need mapped to thumbnailURL', fileurl)
              collateral.push({thumbnailURL: fileurl})
            })
          })
        })
      });
    });
    this.setState({
      collateral
    });
  }

  componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  }

我希望抵押品中的每个对象都要进行必要的查询，以将fileurl返回到它所尊重的抵押品对象。

更新：我稍微整理了一下功能。现在的问题是，它正在经历两个循环，并且不返回值而是仅返回承诺。但是非常接近解决它。即将更新。

  onCollectionUpdate = (querySnapshot) => {
    const collateral = [];
    querySnapshot.forEach((doc) => {

      const { name, image, thumbnail, thumbnailURL, img} = doc.data();
      const thumbnailImg = this.getThumbnailUrl(image[0].id);

      let obj = {
        key: doc.id,
        doc, // DocumentSnapshot
        name,
        image,
        img,
        thumbnail: image[0].id,
        thumbnailURL: thumbnailImg
      }
      collateral.push(obj);
    });
    this.setState({
      collateral
    });
  }

  async getThumbnailUrl(imgRef) {
    console.log('your in', imgRef)
    let snapshot = await firebase.firestore().collection(`fl_files`).where(`id`, '==', imgRef).get();
    console.log(snapshot)
    let snapVal = snapshot.forEach( async(doc) => {
        const { file } = doc.data();
        console.log('this is in the correct order', `${file}`);
        let downloadURL = await storage.child(`${file}`).getDownloadURL()
        console.log('this is the value I need mapped to thumbnailURL', downloadURL)
        return downloadURL;
    })
    return snapVal;
  }

  componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  }

如何将数据从多个嵌套查询正确映射到所需对象。 React / Firebase

0 个答案: