Как подождать, пока getDownloadURL до fini sh в моей функции отображения, прежде чем обновлять массив моего объекта в реагирующем состоянии?

Question

getImages() {
  const entries_copy = this.state.entries;
  entries_copy.map(entry => {
    storage.refFromURL(entry.sign_in_photo).getDownloadURL()
      .then((url) => {
        entry["inPhotoURL"] = url;
        storage.refFromURL(entry.sign_out_photo).getDownloadURL()
        .then((url) => {
          entry["outPhotoURL"] = url;
        });
      }).catch((error) => {
        // Handle any errors
      });
  });

  this.setState({entries: entries_copy});
}

Я пытаюсь получить URL-адрес загрузки для изображений и сохранить их в моем объекте записи в массиве объектов записей, но проблема, с которой я сейчас сталкиваюсь, заключается в том, что setState вызывается до получения URL-адресов и Я понятия не имею, как ждать его завершения, прежде чем устанавливать состояние. Я искал похожие проблемы, но большинство из них решается путем выполнения его внутри then (), но для себя я не могу выполнить его в then (), потому что мне нужно ждать обновления всех записей. Я только недавно начал использовать React для этого проекта, поэтому извините, если ответ очевиден.

Answer 1

В дополнение к ответу @TomSlutsky, обратите внимание, что вам нужно правильно цепочка ваших обещаний, и вы не должны забывать «всегда возвращать результаты, в противном случае обратные вызовы не поймают результат предыдущего обещания ".

Так что вам нужно сделать следующее:

storage.refFromURL(entry.sign_in_photo).getDownloadURL()
      .then((url) => {
        entry["inPhotoURL"] = url;
        return storage.refFromURL(entry.sign_out_photo).getDownloadURL()
      })
      .then((url) => {
          entry["outPhotoURL"] = url;
          this.setState(...);
      })
      .catch((error) => {
          // Handle any errors
      });

Обратите внимание также на то, как метод catch() вызывается в конце цепочки, для получения дополнительной информации см. Do c детали (и возможные другие варианты).

Answer 2

Это потому, что код асинхронный. Вы должны вызвать setState внутри функции .then (). Я бы порекомендовал вам прочитать об обещаниях в Javascript. Они являются важным аспектом языка для овладения.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise