从 URL 数组中获取图像并将它们映射到新数组（ReactJS）

Question

在我的项目中，我必须从 The 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)) 自动设置您的 URLs 数组。

这是Live Example。

代码+一些重构：

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