reactjs 将.map转换为数组

c3frrgcw  于 2022-12-26  发布在  React
关注(0)|答案(2)|浏览(230)

我需要将响应转换为一个数组我使用了javascript的concat函数,但它不起作用
我有一个id的数组:

//Arreglo de ID's
const arrayIdImage = data.value.map((item, index) => {
  const id = JSON.parse(item.Image);
  return id
});

image of the array
我在get请求中使用这些id,如下所示

arrayIdImage.map(async function(item) {
const optionsImage = {
    method: 'GET',
    url: `/items/${item}/thumbnails`,
    headers: {
      'Authorization': `Bearer ${tokenJson}`
    }
  }
  await axios.request(optionsImage).then(function(response) {
    console.log(response.data)
    setUrlGetImage(response.data)
  })
})

我得到的答复如下:每个ID请求对应一个数组
response image

0yg35tkg

0yg35tkg1#

你的方法是正确的,但是如果你想要一个值的数组,那么你调用.map()的函数需要返回一个值,而不是简单地调用另一个方法。这将是一个承诺的形式,而不是值本身,这意味着你将有一个承诺的数组,每个数组包含一个图像。

const thumbnailPromises = arrayIdImage.map(async function(item) {
      const optionsImage = {
        method: 'GET',
        url: `/items/${item}/thumbnails`,
        headers: {
          'Authorization': `Bearer ${tokenJson}`
        }
      }
      return axios.request(optionsImage).then(function(response) {
        return response.data
      })
    })

    const thumbnails = await Promise.all(thumbnailPromises)

您可以阅读更多关于Promise.all()Promise.allSettled()的内容,以便更好地了解它是如何工作的,但重要的是,您一次发送所有数据请求(在.map()中),然后等待它们全部完成,而不是发送一个请求,等待收到回复,然后再发送下一个请求,等等。

fcwjkofz

fcwjkofz2#

您可以使用Promise.all()来并行发送所有请求,并等待它们全部完成(这要快得多)。

const requests = arrayIdImage.map((item) => {
  const optionsImage = {
    method: 'GET',
    url: `/items/${item}/thumbnails`,
    headers: {
      Authorization: `Bearer ${tokenJson}`,
    },
  }
  return axios.request(optionsImage);
});

const results = await Promise.all(requests);
const data = results.map((result) => result.data);

你可以用foreEach函数在id上迭代arrayIdImage,在forEach函数内部你可以按id获取数据,然后把响应推送到一个数组,就像这样。

const data = []

arrayIdImage.forEach(async (item) => {
  const optionsImage = {
    method: 'GET',
    url: `/items/${item}/thumbnails`,
    headers: {
      Authorization: `Bearer ${tokenJson}`,
    },
  }
  const res = await axios.request(optionsImage)
  data.push(res.data)
})

相关问题