为什么我不能在基于promise的嵌套数组对象中分配新的键值？

Question

我花了两天才知道​​这个案子

我有一个像这样的数组：

[
  {
    "Document_Code": "DC001",
    "Data": [
      {
        "uri": "url images"
      }
    ],
  },
  {
    "Document_Code": "DC002",
    "Data": [
      {
        "uri": "url images"
      }
    ]
  }
]

我有一个将URL图像转换为Base64的功能，如下所示：

toDataURL(url) {
  return new Promise(resolve=>{
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        resolve(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  })
}

并且我想将新的密钥base64和Base64值分配到我的数组中，所以我希望得到一个像这样的新数组：

[
  {
    "Document_Code": "DC001",
    "Data": [
      {
        "uri": "url images",
        "base64": "base64 value"
      }
    ],
  },
  {
    "Document_Code": "DC002",
    "Data": [
      {
        "uri": "url images",
        "base64": "base64 value"
      }
    ]
  }
]

我尝试使用map和nested map ，但是以某种方式我无法分配base64 key和value

这是我尝试过的：

addBase64Function(){
  const tempPromise=[]
  this.state.valueField.Document && this.state.valueField.Document.map((el)=>{
    el.Data.map((el2)=>{
      tempPromise.push(
        this.toDataURL(el2.uri)
        .then((base64)=>{
          el2.base64 = base64.split(',')[1];
        })
      )
    })
  })
  return Promise.all(tempPromise)
}

//call base64Function and console val
this.addBase64Function().then(()=>{console.log(this.state.valueField.Document)})

Answer 1

奇怪如何改变状态，请尝试以下操作：

addBase64Function(values = []) {
  //always return a promise, even if values is undefined
  return Promise.all(
    values.map(el =>
      Promise.all(
        //for each Data prop of el add base64
        el.Data.map(el2 =>
          this.toDataURL(el2.uri).then(base64 => ({
            ...el2,
            base64: base64.split(','),
          }))
        )
        //set the data prop of el, this data has base64
      ).then(Data => ({ ...el, Data }))
    )
  );
}

//call it like this:
this.addBase64Function(this.state.valueField.Document).then(
  result => {
    console.log('result is:', result);
  }
);

如果要记录base64返回的信息，可以执行以下操作：

this.toDataURL(el2.uri).then(
  base64 =>
    console.log('got base64:', base64) || {
      ...el2,
      base64: base64.split(','),
    }
)