React中removeTask函数参数替换后失效的技术问询

云原生阿岚

2026-5-9

为什么修改removeTask参数名后失效？差异与原因解析

嘿，我来帮你拆解这个问题！其实核心问题很简单——你搞错了任务对象的属性名，咱们一步步理清楚：

两种写法的核心差异

1. 能正常运行的写法

const removeTask = (id) => { 
  setTasks(tasks.filter(task => task.id !== id)) 
}

这里的逻辑是通顺的：

函数接收的参数叫id（这个名字其实可以自定义，只是习惯和属性名保持一致）
过滤时对比的是任务对象本身存在的id属性（你的初始tasks数组里每个任务都是{name: "...", id: 数字}的结构）
当传入某个任务的id值时，task.id !== id能精准匹配到要删除的任务，过滤后就会把它从数组中移除

2. 失效的写法

const removeTask = (myID ) => { 
  setTasks(tasks.filter(task => task.myID !== myID)) 
}

这里直接失效的原因有两个：

你的任务对象里根本没有myID这个属性！不管是初始数组还是addTask函数，都是用id作为唯一标识的属性名，所以task.myID会返回undefined
当你拿undefined和传入的myID（比如1）对比时，undefined !== 1永远是true，导致filter不会过滤掉任何任务，看起来就像函数完全没生效

修正方法

如果你只是想把参数名改成myID，不需要改动任务对象的属性，只需要把过滤时的属性名改回task.id就行：

const removeTask = (myID ) => { 
  setTasks(tasks.filter(task => task.id !== myID)) 
}

如果你想统一把属性名改成myID，那就要同步修改初始数组和addTask函数：

const [tasks, setTasks] = useState([ 
  {name: "Faruk", myID:1}, 
  {name: "Ramesh", myID:2}, 
  {name: "Sugana", myID:3} 
])

const addTask = tit => { 
  setTasks([...tasks, {name:tit, myID:uuid()}]) 
}

const removeTask = (myID ) => { 
  setTasks(tasks.filter(task => task.myID !== myID)) 
}