如何删除多个数组项答案

【问题标题】：How can I delete Multiple array items如何删除多个数组项
【发布时间】：2020-11-16 12:23:47
【问题描述】：

我正在使用 React js。我想添加一个选项来删除多个项目。但是在删除每个项目后，页面会刷新道具而不是删除剩余的项目。

如何删除多个项目？

const onDeleteAll = arr => {
        
    arr.forEach(element => {
      const formData = {
        id:element
      }

      props.onDeleteSubmit(formData, function(){ // pass id to delete func
        console.log('deleted')
      })
    });
  }

  useEffect(() => {
    props.getPriceType(); // fetching data
  }, []);

减速器：

case DELETE_PRICE_TYPE_SUCCESS_ACTION:
          const myDeletedArray = draft.list;
          const objDeletedIndex = myDeletedArray.filter(obj => obj.id !== action.payload._id);
          draft.list = objDeletedIndex; //update data
          break;

【问题讨论】：

您确定您使用的是 State 而不仅仅是使用完全静态的数据吗？
是的......我正在与州合作

标签： javascript reactjs api redux-saga redux-reducers

【解决方案1】：

var id = 23;
var list = [{
  id: 23,
  value: "JOHN"
}, {
  id: 23,
  value: "JADE"
}, {
  id: 24,
  value: "JADE"
}, {
  id: 25,
  value: "JAMES"
}];

var indexes = [];
const templist = list.filter((item, ind) => {
  return item.id !== id
});
list = templist;
console.log(list);

首先获取与要删除的数组中的项目匹配的索引列表。遍历上面的列表，通过拼接操作删除每个数组中的项。

【讨论】：

但删除一项后，道具刷新。
我添加了一个更有效的工作示例，并且没有太多循环。它一次性更改列表。
可以使用短版过滤器：list.filter(item => item.id !== id)

【解决方案2】：

我认为问题在于您有多个要删除的项目，但您一次只能触发 1 个删除操作。您需要收集所有要在列表中删除的 id，然后将该列表发送到操作，然后在 reducer 中过滤该 id。

const onDeleteAll = arr => {

  //this just to follow your current shape of things
  //ideally you don't want to do that, just pass arr to the onDeleteSubmit

  const formData = arr.map(element => ({
      id:element
  }));

  props.onDeleteSubmit(formData, function(){
      console.log('deleted')
  })  
  
}
useEffect(() => {
  props.getPriceType(); // fetching data
}, []);

减速器：

case DELETE_PRICE_TYPE_SUCCESS_ACTION:
          const myDeletedArray = draft.list;
          const objDeletedIndex = myDeletedArray.filter(obj => 
            !action.payload.find(itemToDelete=>itemToDelete._id===obj.id)
          );
          draft.list = objDeletedIndex; //update data
          break;

【讨论】：