时间戳

首页 > 解决方案 > 为什么我不能在基于承诺的嵌套数组对象中分配新的键值？

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

问题描述

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

我有一个这样的数组：

[
  {
    "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"
      }
    ]
  }
]

我尝试过使用mapand nested map，但不知何故我无法分配base64 keyandvalue

这是我尝试过的：

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)})

标签： javascriptreactjsreact-nativepromisemapping

解决方案

奇怪你如何改变状态，也许尝试以下方法：

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(','),
    }
)

推荐阅读