Почему не удаляется item?

Question

[Игорь Брадулофф]

Добрый день! Подскажите, почему не удаляется item, а добавляется?

class App extends Component {
	state = {
		todoData:[
			{ label: 'Drink Coffee', important: false, id: 1 },
			{ label: 'Make Awesome App', important: true, id: 2 },
			{ label: 'Have a lunch', important: false, id: 3 }
		]
	}
	
	deleteItem=(id)=>{
		this.setState(({todoData})=>{
			const idx = todoData.findIndex((el)=>el.id===id)
			const newArray = [...todoData.slice(0,idx),...todoData.slice((idx+1))];
			return {
				todoData:newArray
			}
		})
	}
	render(){		
		return (
    <div className="todo-app">
      <AppHeader toDo={1} done={3} />
      <div className="top-panel d-flex">
        <SearchPanel />
        <ItemStatusFilter />
      </div>
      <TodoList todos={this.state.todoData} onDeleted={this.deleteItem}  />
    </div>
  );
	}  
}
ReactDOM.render(<App />,
  document.getElementById('root'));

Comments

[Bohdan Petrov]

Курс от Юрия Буры проходите?)
Исходники на github есть, можете там подсмотреть.

P.S. Уберите alert

[Игорь Брадулофф]

Bohdan Petrov, да, проблема решилась, как это обычно бывает -невнимательность

[Bohdan Petrov]

Игорь Брадулофф, alert блокирует выполнение кода, учитывайте это)
А курс у него хороший, ещё и хуки добавил)
Отметьте решением, если несложно.

Answer 1

[0xD34F]

почему не удаляется item, а добавляется?

ДобавляЕтся - это как? Я бы поверил в "добавляЮтся" - если в deleteItem передать несуществующий id, тогда индекс элемента будет равен -1, и новый массив окажется копией исходного без последнего элемента (slice(0, -1)) плюс полная копия (slice(0)).

Кстати, а что в deleteItem передаётся? Непонятно, как этот метод используется - код компонента TodoList вы почему-то не показали (как и код компонента, представляющего отдельный todo, если таковой у вас имеется).

А вообще, удаление делается не так, есть же filter:

deleteItem = id => {
  this.setState(({ todoData }) => ({
    todoData: todoData.filter(n => n.id !== id),
  }));
}

Comments

[Bohdan Petrov]

Данный способ удаления так же работает, потому тут дело вкуса.

[0xD34F]

Bohdan Petrov, не так же. При удалении несуществующих данных результат будет разным.

[Bohdan Petrov]

0xD34F, данные в данном случае берутся со state, потому разницы нету.

[Yustas Alexu]

Данный способ удаления так же работает, потому тут дело вкуса.

На проекте могут быть и другие разработчики, которые могут не оценить ваш специфический вкус. filter проще, логичнее, короче и хорошо укладывается в правило KISS.

[Bohdan Petrov]

Yustas Alexu, это хорошо, что мы обсудили, как правильно удалять, вот только к сути вопроса это не относится.