Как установить состояние после сопоставления массива и объекта в реагировать / JS? - PullRequest
Новая
       4

Как установить состояние после сопоставления массива и объекта в реагировать / JS?

0 голосов
/ 07 ноября 2019

У меня есть patients array в состоянии. Если patient.room соответствует roomStates.room, тогда я бы хотел установить patient.roomStatus на roomStates[key].name. Моя функция заключается в следующем, но я не могу понять, почему он не работает. 

Patient array

const patients = [
{name: "Jay”, room: "room01", roomStatus: ""}, 
{name: "Leo”, room: "room02", roomStatus: ""}, 
{name: "Jim", room: "room05", roomStatus: ""}
]

const  roomState = { 
room01: {type: "info", room: "room01", name: "Stopped"},
room02: {type: "normal",room: "room02", name: "InRoom"},
room05: {type: "normal", room: "room05",name: "InRoom"},
}

   handleRoomStateChange(roomStates) {

        Object.keys(roomStates).map((key) => {
            this.state.patients.map(patient => {

                if (patient.room === roomStates[key].room) {


                    this.setState({ ...patient, roomStatus: roomStates[key].name});
                }

            })

        });
    }

1 Ответ

1 голос
/ 07 ноября 2019

Не устанавливайте состояние на каждой итерации цикла, сохраняйте данные в массив, а затем устанавливайте его после завершения цикла, выполнив: 

handleRoomStateChange = roomStates => {
  const patients = Object.keys(roomStates).map(key => {
    return this.state.patients.map(patient => {
      if (patient.room === roomStates[key].room) {
        return {
          ...patient,
          roomStatus: roomStates[key].name
        };
      }
      return patient;
    });
  });

  this.setState({patients});
};

Edit: , который фактически возвращает вложенныймассив, чтобы получить правильную структуру данных, можно избежать лишних map: 

handleRoomStateChange = roomStates => {
  const patients = this.state.patients.map(patient => {
    const roomKey = Object.keys(roomStates).find(key => key === patient.room);
    return {
      ...patient,
      roomStatus: roomStates[roomKey].name
    }
  });
  this.setState({ patients });
}
...