React待办列表实现删除任务按钮时filter方法不生效问题咨询

你的filter方法使用没有错误，问题出在删除按钮的点击事件传参逻辑：

• 现有写法onClick={removeItem}会让React默认把点击事件对象作为参数传入removeItem，而非你预期的任务ID
• 此时removeItem内的判断item.id !== id中，id实际是点击事件对象，所有项的判断结果都为真，过滤后的数组和原数组完全一致，因此看不到删除效果

修改列表渲染部分的按钮绑定逻辑，显式传入当前任务项的ID即可：

{list.map((obj) => (
  <h4 key={obj.id}>
    {obj.title}
    <button onClick={() => removeItem(obj.id)}>X</button>
  </h4>
))}

React状态更新存在异步特性，为了避免闭包缓存旧状态导致的异常，更新列表时推荐使用函数式更新写法：

const submitHandler = (event) => {
  event.preventDefault();
  const newTask = { id: new Date().getTime().toString(), title: task };
  // 基于前一个状态值计算新列表
  setList(prevList => [...prevList, newTask]);
  setTask('');
}

const removeItem = (id) => {
  setList(prevList => prevList.filter(item => item.id !== id));
}

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