Невозможно получить доступ к паре ключ-значение измененного объекта

Question

Прошу прощения за мой код

Из внешнего источника мне выдаются следующие внешние данные, которые я называю loxAP3

, к которым я пытаюсь сначала получить svgданные, связанные со свойством rooms.image, а затем измените входящие данные svg для работы с реагировать, используя следующий код.

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 показывается как заполненный

Однако проблема возникает, когда я пытаюсь манипулировать объектом помещения, если я регистрирую свойство, которое уже существовало из исходных данных, проблема не возникает, однако, еслиЯ пытаюсь получить свойство .svg, которое возвращается не как неопределенное, а как пустую строку. Сначала я задаю ему значение.

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

  }) 
}

Answer 1

Создайте массив обещаний socket.send() вместо вызова их внутри forEach

Затем вы можете использовать Promise.all(), чтобы установить состояние, и вызвать 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'))