无法访问已更改对象的键值对答案

【问题标题】：Cannot access a key value pair of a changed object无法访问已更改对象的键值对
【发布时间】：2019-04-15 17:20:13
【问题描述】：

请原谅我的代码

从外部来源，我得到以下external data which I name loxAP3

我试图首先检索与 rooms.image 属性相关的 svg 数据，然后使用以下代码更改传入的 svg 数据以使用 react。

createRoomData(loxAPP3, socket) {
  console.log(loxAPP3)
  let rooms = []
  let rawRooms = loxAPP3.rooms
  for (const rawRoom in rawRooms) {
    rooms.push(rawRooms[rawRoom])
  }
  //add svg property with blank property value
  rooms.forEach((room) => {
    room.svg = ''
  })
  //fetch image data for each room in loxApp3.rooms
  rooms.forEach((room) => {
    const image = room.image
    socket
      .send(image)
      .then(function(respons) {
          //console.log("Successfully fetched svg image " + respons );   // success
          room.svg = respons
          //console.log(room.svg) // success console returns room.svg data
        },
        function(err) {
          console.error(err);
        }
      );
  })
  this.setState({
    rooms: rooms
  }, () => {
    console.log(rooms) // success rooms[0].svg is shown as having been populated
    this.adjustSvGImageToReact()
  })
}

console.log(rooms) // success rooms[0].svg is shown as having been populated

但是，当我尝试操作房间对象时，问题就来了但作为空字符串，我首先将其设置为。

adjustSvGImageToReact() {  
  this.state.rooms.forEach((room)=>{
    console.log(room.name) // success
    console.log(room.uuid) // success
    console.log(room.svg) //empty

  }) 
}

【问题讨论】：

socket.send() 是异步的，所以 room.svg = respons 将在您 setState 之后以及在您调用 this.adjustSvGImageToReact() 之后发生
了解控制台中登录的对象不是快照也很重要，它们是活动对象。记录对象后更新的属性将在控制台中显示为更新
我也很怀疑，但是对于 javascript 和回调来说，我不知道如何确保在继续之前拥有完整的数据集。任何帮助将不胜感激

标签： javascript javascript-objects

【解决方案1】：

创建socket.send() 承诺的数组，而不是在forEach 中调用它们

然后你可以使用Promise.all()设置状态并在socket请求完成后调用adjustSvGImageToReact()

const svgPromises = rooms.map((room) => {
  const image = room.image
  return socket
    .send(image)
    .then((respons)=> room.svg = respons)

})

Promise.all(svgPromises).then(() => {
  this.setState({rooms: rooms}, () => {
    console.log(rooms) // success rooms[0].svg is shown as having been populated
    this.adjustSvGImageToReact()
  });
}).catch(err=>console.log('One of the socket requests failed'))

【讨论】：

谢谢你我会这样做的