React+TypeScript中deleteTask回调方法无法正常调用的问题

代码共有3处核心错误，导致删除方法无法正常触发、参数无法正确传递：

• 第一处：App.tsx 中向Tasks组件传递onDelete属性的写法错误
  原代码写为onDelete={() => deleteTask}，这个箭头函数仅返回了deleteTask函数本身，既没有接收要删除的任务id参数，也没有实际调用deleteTask方法，点击触发时不会执行任何删除逻辑。同时原deleteTask方法仅打印日志，没有实际更新组件状态，就算触发也不会完成删除操作。
• 第二处：Tasks.tsx 中向Task组件传递onDelete属性的写法错误
  和App层的问题一致，原代码写为onDelete={() => onDelete}，同样只是返回上层传入的onDelete函数引用，没有将当前遍历到的task.id作为参数传入，导致最上层拿不到要删除的任务id。
• 第三处：TypeScript类型定义不匹配
  你在Tasks和Task组件的Props接口里把onDelete定义为React.MouseEventHandler类型，这个类型默认要求接收鼠标事件对象作为参数，但你的删除逻辑实际需要接收number类型的任务id作为入参，类型不匹配会导致参数传递时出现逻辑异常。

修正后的代码 #

App.tsx 修正部分 #

补全状态更新逻辑，修正属性传值写法：

import { useState } from 'react';
import Header from './components/Header';
import Tasks from './components/Tasks';
import { TaskType } from './components/Task'

function App() {

  const [tasks, setTasks] = useState<TaskType[]>([
    {
        id: 0,
        text: 'Doctors Appointment',
        day: 'Feb 4th at 2:30 pm',
        reminder: true
    },
    {
        id: 1,
        text: 'Meeting at school',
        day: 'Feb 5th at 3:50 pm',
        reminder: true
    },
    {
        id: 2,
        text: 'food shopping',
        day: 'Feb 4th at 2:30 pm',
        reminder: false
    }
  ]);

  // 补全状态更新逻辑，过滤掉对应id的任务
  const deleteTask = (id: number) => {
    setTasks(tasks.filter(task => task.id !== id));
  }

  const someTitle = 'Title';

  return (
    <div className='container'>
      <Header title={someTitle}></Header>
      {/* 修正传值：接收id参数，调用deleteTask并传入id */}
      <Tasks tasks={tasks} onDelete={(id: number) => deleteTask(id)}></Tasks>
    </div>
  );
}

export default App;

Tasks.tsx 修正部分 #

修正Props类型定义，调整向子组件传参的写法：

import Task from './Task'
import { TaskType } from './Task'

export interface ITasksListProps {
    tasks: TaskType[]
    // 修正类型：onDelete是接收number类型id的函数，不是默认鼠标事件处理器
    onDelete: (id: number) => void
}

const Tasks: React.FC<ITasksListProps> = ({tasks, onDelete}) => {

    return (
        <>
        {tasks.map ((task) => (
            // 修正传值：点击触发时调用onDelete，传入当前task的id
            <Task key={task.id} task={task} onDelete={() => onDelete(task.id)}/>
        ))}
        </>
    )
}

export default Tasks

Task.tsx 修正部分 #

修正Props类型定义，和上层传值逻辑保持一致：

import { FaTimes } from 'react-icons/fa'

export type TaskType = {
    id: number,
    text: string,
    day: string,
    reminder: boolean
}

export interface ITaskProps {
    task: TaskType
    // 修正类型：匹配上层传值，为触发时调用的无参回调
    onDelete: () => void
}

const Task = ({task, onDelete}: ITaskProps) => {
    return (
        <div className='task'>  
            <h3>{task.text} <FaTimes style={{ color: 'red', cursor: 'pointer' }} onClick={onDelete} /></h3>
            <p>{task.day}</p>
        </div>
    )
}

export default Task

补充说明：如果你需要在Task组件中获取鼠标事件对象，可以将onDelete类型定义为(e: React.MouseEvent, id: number) => void，对应调整传参时把事件对象一并传入即可，不影响核心删除逻辑。

内容的提问来源于stack exchange，提问作者MTomys