Как правильно отобразить данные из нескольких вложенных запросов в нужный объект.Реагировать / Firebase

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