如何解决这个 React Promise 竞争条件问题

Question

我遇到了一个问题，即我无法在不设置“setTimeout()”的情况下使用“setPhotos”设置状态。当我使用 console.log 时，我得到了数据，但是当将 console.log(newArray) 更改为 setPhotos(newArray) 时，状态没有更新/呈现。

setTimeout(() => { 设置照片（新数组）； }, 1000);

任何帮助将不胜感激。也许我从根本上错误地使用了 Promises..？

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);
      });
  }, []);