使用 filter() 方法从待办事项列表中删除一行答案

【问题标题】：use of filter() method to delete a row from a todo list使用 filter() 方法从待办事项列表中删除一行
【发布时间】：2019-07-04 08:57:57
【问题描述】：

我有点卡在过滤待办事项列表上，最终目标是删除已完成的待办事项。

我成功地将deleteTodo() 方法传递给子组件Todo，并且还成功检索了待删除的index。

但是，我尝试继续前进并使用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

【问题讨论】：

标签： reactjs filter

【解决方案1】：

数组方法filter 将函数作为第一个参数，该函数与数组中的每个元素以及元素的索引一起调用。您可以为所有元素返回 true，除了与您传递给 deleteTodo 方法的元素具有相同索引的元素。

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

    return { todos };
  });
}

【讨论】：

【解决方案2】：

filter method 将回调函数作为参数。它将遍历每个元素，为您提供元素及其索引。您可以通过执行以下操作并检查索引是否与提供的索引相同来过滤掉您想要的：

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

【讨论】：