React Redux从列表中删除多个对象

发布时间：2020-07-07 10:11

我刚开始使用react-redux，到目前为止，我很喜欢它。我有一个问题，无法从阵列中删除所有与组ID匹配的对象。

deleteManyProducts: (state, action) => {
     state.list.map((val, i)=>{
          if(val.groupid === action.payload.groupid) {
                state.list.splice(i,1)
          }   
     })
}

我首先用数组中的3个对象对其进行了测试，然后删除了前两个对象。比起我用4个对象测试它，它还删除了前两个对象，并删除了后两个对象。最终，我测试了5个对象，并删除了前三个对象，最后两个删除了。

我检查了几次groupid匹配，并且它确实与我使用的所有对象都匹配。我也尝试了这段代码，但是根本不起作用：

deleteManyProducts: (state, action) => {
     state.list.filter(val=>val.groupid !== action.payload.groupid)
}

但是，当我对其余对象再次执行相同的操作时，它只会删除我选择要删除的对象。我不明白为什么会这样。

回答1

filter（）或map（）方法-创建一个新数组

因此您可以state.list = state.list.filter(...)

但是在Redux中，您无法发送相同的状态...因此您应该使用浅拷贝或深拷贝。

deleteManyProducts: (state, action) => {
     const copy = {...state};
     copy.list = state.list.filter(val=>val.groupid !== action.payload.groupid);
     return copy;
}

回答2

尝试这样的事情：

const list = state.list.filter(val => val.groupid !== action.payload.groupid);
state.list = [...list];

filter和map都返回新数组，即使您在原始数组上使用splice也是如此。在这种情况下，这不是使用它们的正确方法。