Как решить эту проблему состояния гонки React Promise

Question

У меня проблема с тем, что я не могу установить состояние с помощью "setPhotos" без настройки "setTimeout ()". Когда я получаю console.log, я получаю данные, но при изменении console.log (newArray) на setPhotos (newArray) состояние не обновляется / не отображается.

setTimeout (() => {setPhotos (newArray);}, 1000);

Любая помощь будет принята с благодарностью. Может быть, я в основном неправильно использую Обещания ..?

import React, { useState, useEffect } from "react";
import { useParams, useLocation } from "react-router-dom";
import { Table } from "react-bootstrap";
import Firebase from "../../../config/Firebase";
import "./QuoteRequest.scss";

const QuoteRequest = () => {
  const { request } = useLocation().state;
  console.log(request);

  const [photos, setPhotos] = useState([]);

  useEffect(() => {
    let newArray = [];
    Firebase.storage()
      .ref("/images/requests/" + request.id)
      .listAll()
      .then((data) => {
        data.items.forEach((imageRef) => {
          imageRef.getDownloadURL().then((url) => {
            newArray.push(url);
          });
        });
      })
      .then(() => {
        setTimeout(() => {
          setPhotos(newArray);
        }, 1000);
      });
  }, []);
  return (
    <div className="perform mt-4">
      <h1>Perform Quote</h1>
      <Table bordered></Table>
      <h1>Quote here v</h1>
      {photos.length ? (
        photos.map((photo) => (
          // <span>img</span>
          <img src={photo} className="photo" />
        ))
      ) : (
        <span>no</span>
      )}
    </div>
  );
};

export default QuoteRequest;

ОБНОВЛЕНИЕ: Мне удалось получить нужный мне результат со следующим:

useEffect(() => {
    const promises = [
      Firebase.storage()
        .ref("/images/requests/" + request.id)
        .listAll()
        .then((data) => {
          return data.items.map((imageRef) => {
            return imageRef.getDownloadURL();
          });
        }),
    ];
    Promise.all(promises).then((data) => {
      // setPhotos(urls);
      let newArray = [];
      data[0].map((items) => {
        items.then((url) => {
          console.log(url);
          newArray.push(url);
          setPhotos(newArray);
        });
      });
    });
  }, []);

Answer 1

Попробуйте использовать Promise.all

    const promises = Firebase.storage().ref("/images/requests/" + request.id)
      .listAll()
      .then((data) => {
        return data.items.map((imageRef) => {
         return imageRef.getDownloadURL()
        });
      })
      Promise.all(promises).then((urls) => {   
          setPhotos(urls);
      });
  }, []);