从URL数组中获取图像并将其映射到新数组(ReactJS)

Question

在我的项目中，我必须从Met Digital Collection中提取20张图像，并显示三张随机图像。

为了做到这一点，我尝试将每个链接放入一个数组中，并使用promise all获取它们。

问题是每个图像都存储在相同的值中，所以我不能调用该数组中的特定图像。是否可以从"const [url, setURL]"获得索引，或者我可以在"setURL(data.primaryImage)"的同时为图像提供索引？

我很感激能得到的任何帮助！：(

const [url, setURL] = useState([]);
useEffect(() => {
const urls = [
'https://collectionapi.metmuseum.org/public/collection/v1/objects/250940',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/20622',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/436625',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/436444',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/436509',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/359245',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/459090',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/333933',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/333916',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/466350',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/44831',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/383010',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/202660',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/406317',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/337349',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/503448',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/12617',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/248662',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/435805',
'https://collectionapi.metmuseum.org/public/collection/v1/objects/438545',
];
Promise.all(
urls.map((url) =>
fetch(url)
.then((response) => response.json())
.then((data) => setURL(data.primaryImage))
.catch((error) => console.log('There was a problem!', error))
),
[]
);
}, []);

Answer 1

使用Promise.all(...).then(values => setURLs(values))原子设置URL数组。

这是一个活生生的例子。

代码+一些重构：

const [urls, setURLs] = useState([]);
useEffect(() => {
const urls = [
250940,
20622,
436625,
436444,
436509,
359245,
459090,
333933,
333916,
466350,
44831,
383010,
202660,
406317,
337349,
503448,
12617,
248662,
435805,
438545
].map(
(itemId) =>
`https://collectionapi.metmuseum.org/public/collection/v1/objects/${itemId}`
);
Promise.all(
urls.map((currUrl) =>
fetch(currUrl)
.then((response) => response.json())
.then((data) => data.primaryImage)
.catch((error) => console.log("There was a problem!", error))
)
).then((fetchedUrls) => setURLs(fetchedUrls));
}, []);