[英]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.