Javascript 在React中使用filter方法制作Todo应用程序时，如何删除Todo任务？

我目前正在学习React.js，对React.js不太熟悉。我正在制作一个简单的todo应用程序，只是为了研究“CRUD”操作，我尝试在单击按钮时删除任务。我听说这是用过滤法做的。正如我所说，我不熟悉React.js，所以我不能使用filter方法删除任务

这是我的代码

JSX

import "./style.css";
import { useState } from "react";

function App() {
  const [toDos, setToDos] = useState([]);
  const [toDo, setToDo] = useState("");

  return (
    <div className="app">
      <div className="mainHeading">
        <h1>ToDo List</h1>
      </div>
      <div className="subHeading">
        <br />
        <h2>Whoop, it's Wednesday In your onClick handler you can pass the current todo Objects id which you want to delete

onClick ={() => deleteTodo(obj.id)}

导入“/style.css”；
从“react”导入{useState}；
函数App（）{
const[toDos，setToDos]=useState（[]）；
const[toDo，setToDo]=useState（“”）；
返回(
待办事项清单


哇，现在是星期三在onClick处理程序中，您可以传递要删除的当前todo对象id

const deleteTodo = idToDelete => setTodos(currentTodos => currentTodos.filter(todo => todo.id !== idToDelete))

现在，在deleteTodo函数中，您可以执行以下操作

function App() {
  const [toDos,setToDos] = useState([])
  const [toDo,setToDo] = useState('')
  
  const deleteTodo = idToDelete => setTodos(currentTodos => currentTodos.filter(todo => todo.id !== idToDelete))

  return (
         ....
              <div className="right">
                <i onClick ={() => deleteTodo(obj.id)} className="fas fa-trash"></i>
              </div>
            </div>)
         ...
  );
}

注意：我已经从deleteTodo中删除了
this.props
。您正在使用一个功能组件。因此，您不应该使用
this
来访问这些props

所以你的代码必须是这样的

函数应用程序（）{
const[toDos，setToDos]=useState（[]
const[toDo，setToDo]=useState（“”）
const deleteTodo=idToDelete=>setTodos（currentTodos=>currentTodos.filter（todo=>todo.id！==idToDelete））
返回(
....
deleteTodo（obj.id）}className=“fas fa trash”>
)
...
);
}