如何解决React Promise竞赛条件问题

Question

我遇到了一个问题，如果不设置"setTimeout(("，我无法使用"setPhotos"设置状态。当我console.log时，我会得到数据，但当将console.log(newArray(更改为setPhotos(newArray(时，状态不会更新/呈现。

setTimeout(((=>{setPhotos(newArray(；}，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);
});
}, []);