如何删除多个数组项

Question

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

如何删除多个项？

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
  }, []);

reducer:

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;

- the_developer

---

你确定你正在使用状态而不仅仅是处理完全静态的数据吗？ - fesieg

是的，我正在处理状态。 - the_developer

Answer 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);

首先获取与要删除的数组项匹配的索引列表。 遍历上述列表，并使用splice运算符从每个数组中删除项。

- Asutosh

---

但是在删除一个项目后，属性会刷新。 - the_developer

我已经添加了一个工作示例，它更有效率，循环次数也不多。它可以一次性地改变列表。 - Asutosh

可以使用更短的过滤器版本：list.filter(item => item.id !== id)。 - Emre Koc

Answer 2

我认为问题在于您需要删除多个项目，但是每次只触发一个删除操作。您需要将所有要删除的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
}, []);

reducer：

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;

- dulebov.artem