如何使用js typescript删除todo项目(不仅仅是通过任务名称)

Question

我是ts的新手，所以我创建了一个待办事项列表，但当我以与其他人相同的名称完成任务时，它们都会消失。看起来我只需要再添加一个标准来过滤或smth，但我不知道该怎么做。我已经固定了我使用的3个不同的代码文件。

import React, {FC, useState, ChangeEvent} from 'react';
import './App.css';
import TodoTask from './Components/TodoTask'
import { ITask } from './Interfaces';
const taskInitialState = {taskName: "", deadline: 0, description: ""};
const App: FC = () => {
const [task, setTask] = useState<ITask>(taskInitialState);
const [todoList, setTodoList] = useState<ITask[]>([]);
const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
setTask({...task, [event.target.name]: event.target.value});
};

const addTask = (): void => {
setTodoList([...todoList, task])
setTask(taskInitialState);
}
const completeTask = (taskNameToDelete: string): void => {
setTodoList(todoList.filter((task) => {
return task.taskName != taskNameToDelete
}))
}
return (
<div className="App">
<div className="header">
<div className='inputContainer'>
<input type="text" placeholder="Your task" name="taskName" value={task.taskName} onChange={handleChange} />
<input type="number" placeholder="Deadline in days" name="deadline" value={task.deadline} onChange={handleChange} />
<input type="text" placeholder="Description" name="description" value={task.description} onChange={handleChange} />
</div>
<button onClick={addTask}>Add Task</button>
</div>
<div className='todoList'>
{todoList.map((task: ITask, key: number) => {
return <TodoTask key={key} task={task} completeTask={completeTask} />;
})}
</div>
</div>
);
}
export default App;

TodoTask.tsx

import React from 'react';
import { ITask } from '../Interfaces';
interface ITodoTask {
task: ITask;
completeTask(taskNameToDelete: string): void;
}
const TodoTask = ({ task, completeTask }: ITodoTask) => {
return (
<div className='task'>
<div className='content'>
<span className='taskName'>{task.taskName}</span>
<span className='duration'>{task.deadline}</span>
<span>{task.description}</span>
</div>
<button onClick={() => {completeTask(task.taskName)}} >Complete</button>
</div>
)
}
export default TodoTask;

接口.tsx

export interface ITask {
taskName: string;
deadline: number;
description: string;
}

Answer 1

• 您需要更改函数completeTask的参数是对象类型ITask
• 将值传递给函数completeTask是一项任务
• 使用JSON.stringify((并在filter函数中与您的任务进行比较。希望我的回答有帮助