Javascript 当对应项中没有值时,从Redux初始状态删除完整对象
在我的减速器中,初始状态如下所示:Javascript 当对应项中没有值时,从Redux初始状态删除完整对象,javascript,arrays,reactjs,redux,react-redux,Javascript,Arrays,Reactjs,Redux,React Redux,在我的减速器中,初始状态如下所示: const initialState = { isLoading: false, events: [ { year: 2021, place: [ { id: 1, name: "BD" }, { id: 2, name: &q
const initialState = {
isLoading: false,
events: [
{
year: 2021,
place: [
{
id: 1,
name: "BD"
},
{
id: 2,
name: "BD Test"
}
]
},
{ year: 2020, place: [{ id: 3, name: "AMS" }, { id: 4, name: "AMS TEST" }] }
]
};
我一直在尝试实现删除操作的功能。因此,当单击按钮时,将发送“deleteItems”操作,该操作将从位置删除相应的项。此功能运行良好。但是,如果place
中没有值,我将尝试从events
数组中删除所有项
这是我已经尝试过的,但它只是删除了单个位置
。但是,我需要在这里编写当place
变为空时删除整个项的逻辑
case "deleteItems":
return {
...state,
events: state.events.map(event => {
const place = event.place.find(x => x.id === action.id);
if (place) {
return {
...event,
place: event.place.filter(x => x.id !== action.id)
};
}
return event;
})
};
因此,经过修改后,该州的情况如下:(当2021年没有合适的值时)
有人知道如何做到这一点吗。如有任何帮助,我们将不胜感激。提前谢谢。
演示可以从中看到,我先删除了位置。
然后,我根据place数组是否为空来过滤事件。
在那之后,我回到了美国
case "deleteItems":
const eventsPostDeletingPlaces = state.events.map(event => {
const place = event.place.find(x => x.id === action.id);
if (place) {
return {
...event,
place: event.place.filter(x => x.id !== action.id)
};
}
return event;
});
const eventsWithPlaces = eventsPostDeletingPlaces.filter((each) => each.place.length);
return {
...state,
events: eventsWithPlaces
}
检查编辑的沙盒基本上与第一个答案中的逻辑相同,但使用reduce
而不是map
和额外的过滤器
。只是一个选择
案例“deleteItems”:
返回{
……国家,
事件:state.events.reduce((事件,事件)=>{
constplace=event.place.find(x=>x.id==action.id);
如果(地点){
event.place=event.place.filter(x=>x.id!==action.id);
}
如果(event.place.length>0){
事件。推送(事件);
}
返回事件;
}, [])
};
谢谢你的回答。我已经接受了。我还试图在你的答案上写一个逻辑,如果今年和明年是当前年份,我不需要删除整个事件数组。有可能帮我吗?如果我错了,请纠正我,但这就是我对这里要求的理解。如果内部没有位置(现有功能),但仅当年份不是当前年份或下一年时,才希望删除事件。如果这是必需的,请检查此代码沙盒以获取更新的代码。是的,这是我尝试过的,我的缺点是我无法实现该逻辑(看起来很简单)。再次感谢
case "deleteItems":
const eventsPostDeletingPlaces = state.events.map(event => {
const place = event.place.find(x => x.id === action.id);
if (place) {
return {
...event,
place: event.place.filter(x => x.id !== action.id)
};
}
return event;
});
const eventsWithPlaces = eventsPostDeletingPlaces.filter((each) => each.place.length);
return {
...state,
events: eventsWithPlaces
}