今天，我添加了删除我的React应用程序中的点击时删除监督事件的功能。
再一次让我惊讶的是，我需要从嵌套数组中删除一个项目的大量代码。：
deleteSveFromSv = (sv, sve) => {
this.setState(prevState => {
// iterate over the breaks
let $breaksArray = [];
prevState.pausen.map((pause) => {
// filter out the element to delete
let $supervisionsArray = [];
pause.supervisions.map((supervision) => {
// only if id of supervision matches with clicked supervision
if (supervision.id === sv.id) {
// push to $supervisionArray without the clicked supervisionEvent
$supervisionsArray.push({
...supervision,
'supervisionEvents': supervision.supervisionEvents.filter((supervisionEvent) => supervisionEvent.id !== sve.id)
});
} else {
// its not in the clicked supervision - so push it to $supervisionArray
// just like it is - unchanged
$supervisionsArray.push(supervision);
}
});
// merge all together - after change is done
$breaksArray.push({...pause, 'supervisions': $supervisionsArray});
});
// return ready to go pausen as the new state
return {
...prevState, pausen: $breaksArray
}
})
};
正如我所说的-这是从嵌套数组中删除单个数据的唯一代码。
我了解了immer.js，它可以更轻松地产生新状态。 但是，当我阅读文档时，我不确定，从哪里开始以及结果在使用immer进行完全相同的处理时的外观如何。
是否有immer.js专家，哪能告诉我immer.js如何简单地编写代码？
这是我的数据结构：
例如，如何从ID：171的监督中删除ID：2的监督事件？
"pausen" => array:7 [▼
0 => array:4 [▶]
1 => array:4 [▼
"id" => 16
"startTime" => DateTime @33900 {#4278 ▼
date: 1970-01-01 09:25:00.0 UTC (+00:00)
}
"endTime" => DateTime @35400 {#4272 ▼
date: 1970-01-01 09:50:00.0 UTC (+00:00)
}
"supervisions" => array:10 [▼
0 => array:4 [▼
"id" => 171
"location" => array:2 [▼
"id" => 30
"name" => "Aula"
]
"teachersCount" => 2
"supervisionEvents" => array:1 [▼
0 => array:3 [▼
"id" => 2
"day" => 1
"teacher" => array:2 [▼
"userId" => 2
"username" => "Bettina Raidel"
]
]
]
]
1 => array:4 [▼
"id" => 172
"location" => array:2 [▼
"id" => 31
"name" => "Stock 1"
]
"teachersCount" => 5
"supervisionEvents" => []
]
2 => array:4 [▼
"id" => 173
"location" => array:2 [▼
"id" => 32
"name" => "Blaaah"
]
"teachersCount" => 3
"supervisionEvents" => []
]
3 => array:4 [▼
"id" => 174
"location" => array:2 [▼
"id" => 33
"name" => "Blaaah"
]
"teachersCount" => 4
"supervisionEvents" => []
]
4 => array:4 [▼
"id" => 176
"location" => array:2 [▼
"id" => 34
"name" => "sdffds"
]
"teachersCount" => 1
"supervisionEvents" => []
]
5 => array:4 [▼
"id" => 183
"location" => array:2 [▼
"id" => 35
"name" => "Stock 2"
]
"teachersCount" => 1
"supervisionEvents" => []
]
6 => array:4 [▼
"id" => 190
"location" => array:2 [▼
"id" => 36
"name" => "Stock 3"
]
"teachersCount" => 1
"supervisionEvents" => []
]
7 => array:4 [▼
"id" => 197
"location" => array:2 [▼
"id" => 37
"name" => "Keller"
]
"teachersCount" => 1
"supervisionEvents" => []
]
8 => array:4 [▼
"id" => 204
"location" => array:2 [▼
"id" => 38
"name" => "Dachboden"
]
"teachersCount" => 1
"supervisionEvents" => []
]
9 => array:4 [▼
"id" => 211
"location" => array:2 [▼
"id" => 39
"name" => "Bibliothek"
]
"teachersCount" => 1
"supervisionEvents" => []
]
]
]
2 => array:4 [▶]
3 => array:4 [▶]
4 => array:4 [▶]
5 => array:4 [▶]
6 => array:4 [▶]