ReactJS axios.post внутри карты через функцию массива, которая возвращает объект

#javascript #reactjs

#javascript #reactjs

Вопрос:

Поэтому я пытаюсь отобразить через массив, и для каждого элемента в массиве есть значение параметра для запроса post. Итак, я ищу finalArray с возвращаемым значением ответа на запрос post, и мне нужно использовать finalArray где-то еще.

 const finalArray = paramArray.map(paramKey => {
  axios.post(URL, {
    filters: [
      {
        field: "key", 
        values: [paramKey.key]
      }
    ]
  }).then(res => {
      //res.data.itemName
    });

  return {
    key: paramKey.key,
    text: //res.data.itemName,
    value: paramKey.value
  }
});
  

поэтому я не уверен, как передать res.data.itemName внешнюю часть функции .then . Я попытался объявить переменную перед axios, такую как let name = ""; , и внутри .then у меня есть name = res.data.itemName , затем я передаю имя в текст как text: name , но это даст мне всю пустую строку. Я также попытался поместить возврат внутрь .then , таким образом finalArray , он дает мне неопределенные значения.

Есть ли какой-либо способ передать значение res.data.itemName как значение text ?

Ответ №1:

Вы можете использовать Promise.all

 async function() {
  const promises = paramArray.map(paramKey => axios.post(URL, {
      filters: [
        {
          field: "key", 
          values: [paramKey.key]
        }
      ]
    })
  );

  const values = await Promise.all(promises)
  const finalArray = paramArray.map((paramKey, index) => {
    return {
      key: paramKey.key,
      text: values[index].data.itemName,
      value: paramKey.value
    }
  })
}  

Комментарии:

1. Но таким образом я могу использовать finalArray за пределами этого Promise.all?

2. Вы можете использовать await .

3. я обновил ответ с помощью await . поступая таким образом, вы можете использовать finalArray .

4. Спасибо, мне пришлось немного изменить свой код, чтобы заставить его работать, но это очень помогло!