Question

我有点想过滤待办事项清单，最终目的是删除已完成的待办事项。

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

但是，我尝试前进并使用filter方法来过滤待办事项列表，并过滤出已删除的待办事项列表（我不想使用切片，但可以使用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以函数作为第一个参数，该函数随数组中的每个元素以及元素的索引调用。您可以为所有元素返回true，但索引与传递给deleteTodo方法的元素相同的元素除外。

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

    return { todos };
  });
}

Answer 2

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

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

使用filter（）方法从待办事项列表中删除一行

2 个答案: