3

我正在使用反应 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;
4

2 回答 2

3 

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

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

于 2020-07-27T07:46:05.213 回答
1

我认为问题在于您有多个要删除的项目，但您一次只能触发 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;
于 2020-07-27T09:07:35.523 回答