использование метода filter () для удаления строки из списка задач

Question

Я немного застрял в фильтрации списка дел с конечной целью удаления завершенного задания.

Я успешно передал метод deleteTodo() дочернему Компоненту Todo, а также получил index Todo для удаления.

Однако я попытался продвинуться вперед и использовать метод filter, чтобы отфильтровать список Todos и отфильтровать удаленный (я не хочу использовать слайс, но попрактикуйтесь с filter()),но мне не удается его использовать.

У меня есть 2 файла: App.js и дочерний компонент ToDo.js

Спасибо!

App.js (для полной версии)код: https://codeshare.io/24n7Yj)

 deleteTodo(index) {
      const todos = this.state.todos.filter();
      const todo = todos[index];
      this.setState({ todos: todos });
    }

ToDo.js

 import React, { Component } from 'react';

class ToDo extends Component { //define a class that extends Component
   render() {
   return (
       <li>
          <input type="checkbox" checked={ this.props.isCompleted } onChange={ this.props.toggleComplete } />
          <span>{ this.props.description }</span>
          <button onClick ={this.props.deleteTodo}>Delete</button>
       </li>
   );
 }
}

export default ToDo; //the component is made to export the data

Answer 1

Метод filter принимает функцию обратного вызова в качестве аргумента.Он будет проходить через каждый элемент, давая вам элемент и его индекс.Вы можете отфильтровать тот, который вам нужен, выполнив следующие действия и проверив, совпадает ли индекс с предоставленным:

deleteTodo = index => {
    this.setState(prevState => ({
        todos: prevState.todos.filter((todo, i) => i !== index)
    }));
}

Answer 2

Метод массива filter принимает функцию в качестве первого аргумента, который вызывается с каждым элементом в массиве, и индекс элемента.Вы можете вернуть true для всех элементов, кроме элемента с тем же индексом, что и у элемента, переданного методу deleteTodo.

deleteTodo(index) {
  this.setState(prevState => {
    const todos = prevState.todos.filter((todo, i) => i !== index);

    return { todos };
  });
}