OnDelete函数在react任务跟踪器中不起作用

Question

我目前正在通过观看youtube上的教程来学习反应(https://www.youtube.com/watch?v=w7ejDZ8SWv8&t=762s(。在51:40左右，我们专注于删除任务和道具钻孔，OnDelete功能似乎根本不起作用。添加OnDelete后，我被指示什么都没发生的文件。不确定是什么原因导致了这个问题。

App.js

import Header from "./components/Header";
import Tasks from "./components/Tasks";
import { useState } from "react";
function App() {
const [tasks, setTask] = useState([
{
id: 1,
text: "Doctors Appointment",
day: "February 5th at 2:30pm",
reminder: true,
},
{
id: 2,
text: "Meeting at School",
day: "February 6th at 1:30pm",
reminder: true,
},
{
id: 3,
text: "Food shopping",
day: "February 5th at 2:30pm",
reminder: false,
},
]);
//Delete Task List
const deleteTask = () => {
console.log("delete");
};
return (
<div className="container">
<Header title="Task Tracker" />
<Tasks tasks={tasks} onDelete={deleteTask} />
</div>
);
}
export default App;

Task.js

import { FaTimes } from "react-icons/fa";
const Task = ({ task, OnDelete }) => {
return (
<div className="task">
<h3>
{task.text}{" "}
<FaTimes
styles={{ color: "red", cursor: "pointer" }}
onClick={OnDelete}
/>{" "}
</h3>
<p>{task.day}</p>
</div>
);
};
export default Task;

Tasks.js

import Task from "./Task";
const Tasks = ({ tasks, onDelete }) => {
return (
<>
{tasks.map((task) => (
<Task key={task.id} task={task} onDelete={onDelete} />
))}
</>
);
};
export default Tasks;

Answer 1

您在Task.js中错误地销毁了onDelete。它应该是onDelete而不是OnDelete。更新组件：

import { FaTimes } from "react-icons/fa";
const Task = ({ task, onDelete }) => {
return (
<div className="task">
<h3>
{task.text}{" "}
<FaTimes
styles={{ color: "red", cursor: "pointer" }}
onClick={OnDelete}
/>{" "}
</h3>
<p>{task.day}</p>
</div>
);
};
export default Task;