Невозможно использовать управляемый атрибут объекта javascript

Question

У меня есть такой объект:

{
    ...,
    receiptsDetailsList: {
        Jan: [{}],
        Feb: [{}]
    },
    ...
}

Я пытаюсь манипулировать объектами в массивах месяцев следующим образом:

Вызов функции

this.transformToWebReceipt(this.receipts).then(newReceiptsDetailsList => {
        this.invoice.receiptsDetailsList = newReceiptsDetailsList;
        console.log(this.invoice.receiptsDetailsList);
        Object.values(this.invoice.receiptsDetailsList).forEach(receipts => {
          // undefined here
        console.log(receipts[0].image);
        })
        //this.invoiceGenerator.createPdf(this.invoice);
      });

Функция

transformToWebReceipt(receiptsData) {
    let newReceiptsData = receiptsData;
    return new Promise(async resolve => {
      Object.values(newReceiptsData).forEach((receipts: any) => {
        receipts.forEach(receipt => {
          this.imagesDb.getReceiptImagesByReceiptId(receipt.mobileReceiptId).then((img: any) => {
            if (img !== undefined) {
              receipt.image = img.picture;
            }
          });
        });
      });
      resolve(newReceiptsData);
    });
  }

Когда я затем пытаюсь сохранить в console.log изображение получения после манипуляции, я получаю undefined, что бы я ни делал. Тем не менее, я вижу в DevTools, что Image был установлен. У меня есть «значения, указанные ниже, были оценены только что» на DevTools. Я что-то не так делаю при установке объекта?

Answer 1

this.imagesDb.getImgById - асинхронная функция. Это означает, что он будет работать в фоновом режиме, пока ваш код продолжает работать. .then указывает, что функция будет запущена после завершения работы. Поэтому, если вы хотите использовать содержимое функции, поместите все в .then или используйте асинхронную функцию.

Подробнее здесь и здесь .

Answer 2

Вам следует избегать использования forEach при работе с обещаниями, поскольку он не знает обещаний this.imagesDb.getReceiptImagesByReceiptId - это асинхронная функция, которая возвращает обещание, что означает, что любой код после этой функции ex: console.log(receipt.image) будет выполняться, пока ваш getReceiptImagesByReceiptId будет принимая естественное время, чтобы вернуть обещание. следовательно, почему вы получаете undefined чтобы исправить это, вы должны использовать receipt.image внутри then или вернуть новые значения в новую переменную объекта / массива

Итак, ваш код должен выглядеть так

const returnimage = async (receiptsDetailsList)=> {
   imgob={}
 Object.entries(receiptsDetailsList).forEach(async (receipts: any) => {
        imgob[receipts[0]]=[]
      for (let i = 0; i < receipts[1].length; i++) {
         var finalvalue=imagesDb.getImgById(receipts[1][i].mobileReceiptId).then((img: any)=>{
          if (img !== undefined) {
            imgob[receipts[0]].push(receipts[1][i].image = img.picture)
            }
          if (img !== undefined) {  imgob[receipts[0]].push(0) }
          else {   imgob[receipts[0]].push(img) }  
             return imgob
          })
        }
        finalvalue.then(o=>{
          console.log(o)
        })
     })
    }
    returnimage(receiptsDetailsList)