[英]How to set State after mapping over an array and object in react/JS?
我在 state 中有一個patients array
。 如果patient.room
匹配roomStates.room
那么我想將patient.roomStatus
設置為roomStates[key].name
。 我的 function 如下,但我不明白為什么它不起作用。
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});
}
})
});
}
不要在每次循環迭代時設置 state,將數據保存到數組中,然后在循環執行完成后設置它:
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});
};
編輯:實際上返回一個嵌套數組,為了獲得正確的數據結構,可以避免額外的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 });
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.