从数组中删除一个元素并更新顺序

Question

我在状态中有一组对象。该对象的顺序为属性。我需要用于拖放的订单道具。该列表按顺序排序。此外，还有一个从列表中删除项目的功能。如何通过更新顺序正确地从数组中删除元素属性?

  const deleteTodo = (id) => {

    //I tried using map but it doesn't work

    setTodos(todos.map((todo, index) => {
      if (todo.id !== id) {
        return { ...todo, order: index + 1 } 
      }
      return todo
    }))

  }

/* for example:
[{title: 'apple', order: 1}, {title: 'banana', order: 2}, {title: 'pear', order: 3}] => delete banana => [{title: 'apple', order: 1}, {title: 'pear', order: 2}] */

我根据建议的选项编写了这个解决方案：

  const deleteTodo = (id) => {
    const newTodos = todos
      .filter(todo => todo.id !== id)
      .map((todo, index) => ({ ...todo, order: index + 1 }))
    setTodos(newTodos)
  }

Answer 1

筛选删除
映射改变顺序值

const items = [{
  title: 'apple',
  order: 1
}, {
  title: 'banana',
  order: 2
}, {
  title: 'pear',
  order: 3
}]
//Delete {title: 'banana', order: 2}
const newItems = items.filter(el => el.title !== "banana").map(el => el.order > 2 ? ({ ...el,
  order: el.order - 1
}) : el)

console.log(newItems)

Answer 2

你必须过滤掉没有特定id的数组，然后再分配它的顺序

const deleteTodo = (id) => {
  const newTodos = todos.filter(todo => todo.id !== id)

  newTodos.map((todo, index) => {
    return {
      ...todo,
      order: index
    }
  })

  setTodos(newTodos)
}

Answer 3

此函数将获得您正在寻找的结果，但不能删除。我用不包括您要删除的对象的对象重新创建数组，并给它们新的排序。

const data = [{title: 'apple', order: 1}, {title: 'banana', order: 2}, {title: 'pear', order: 3}];

function removeObjectAndReorder(data, orderToRemove){
  let result = [];
  let counter = 0;
  for (let i = 0; i < data.length; i++){
    if (i+1 !== orderToRemove){
      result.push({
        'title': data[i].title,
        'order': ++counter,
      })
    }
  }
  return result;
}

console.log(removeObjectAndReorder(data,2)); // Remove banana (order = 2)

Answer 4

const list = [
    {id: 1, title: 'apple', order: 1},
  {id: 2, title: 'banana', order: 2},
  {id: 3, title: 'pear', order: 3},
];

const deleteItem = (id) => {
    const newList = [...list]
    .sort((a,b) => a.order - b.order) // make sure list is in order
    .filter(el => el.id !== id) // filter out the selected item
    .map((el, i) => ({...el, order: i+1})); // Change the order values
  return newList;
}

console.log(deleteItem(2));

Answer 5

你可以试试这个

const deleteTodo = (id) => {

  const targetIndex = todos.findIndex((todo) => todo.id === id);

  if (targetIndex < 0) {
    // target element was not found. you need to handle this case
    return;
  }

  const updatedTodos = todos.reduce((accumulated, todo, index) => {
    if (index < targetIndex) {
      accumulated.push(todo);
    } else if (index > targetIndex) {
      accumulated.push({ ...todo, order: todo.order - 1 });
    }
    return accumulated;
  }, []);

  setTodos(updatedTodos);
}

从数组中删除一个元素并更新顺序

Delete an element from the array and update order

javascript

reactjs

react-hooks