当前位置：首页 > 文章列表 > 文章 > 前端 > React 实现待办事项删除功能详解

React 实现待办事项删除功能详解

2026-04-02 15:54:32 0浏览收藏

热门推荐

漫画APP

动画内容聚合，热门资源快捷查看

本文深入解析了如何在 React Todo 应用中安全、高效地实现待办事项删除功能，从避免直接修改原数组的状态陷阱出发，详解了基于索引的不可变更新策略（如展开运算符+splice或更推荐的filter函数式写法），强调了事件绑定、key规范、样式可访问性等实战细节，并指出生产环境中应优先使用唯一ID而非索引删除以防止重排误删，最后延伸至确认弹窗、动画等体验优化方向——帮你补齐功能闭环的同时，真正写出符合现代 React 最佳实践、健壮又易维护的代码。

如何在 React 中实现待办事项列表的删除功能

本文介绍如何为 React Todo 应用添加安全、高效的列表项删除功能，包括基于索引的删除逻辑、事件绑定方式及关键注意事项，帮助开发者避免状态更新陷阱。

本文介绍如何为 React Todo 应用添加安全、高效的列表项删除功能，包括基于索引的删除逻辑、事件绑定方式及关键注意事项，帮助开发者避免状态更新陷阱。

在当前的 Todo 列表实现中，用户可添加任务但无法删除——这是功能闭环的关键缺失。要支持删除操作，核心在于：为每个列表项绑定唯一删除行为，并确保状态更新符合 React 的不可变更新原则。

✅ 正确的删除实现方式

首先，在组件内定义 deleteTodo 函数，接收当前项的索引（index），通过浅拷贝数组 + splice() 移除指定位置元素，再调用 setList 更新状态：

const deleteTodo = (index: number) => {
  const updatedList = [...list]; // 创建新数组副本（不可变更新）
  updatedList.splice(index, 1);   // 删除该索引处的 1 个元素
  setList(updatedList);
};

⚠️ 注意：切勿直接对原数组调用 splice() 后 setList(list) —— 这会修改原始 state 引用，导致 React 无法正确触发重渲染或引发难以调试的副作用。

接着，在 list.map() 渲染逻辑中，为每项包裹可点击的交互元素（如

))}

? 关键细节说明：

✅ 必须为 map 提供 key 属性（推荐使用 index 仅限临时/简单场景；若需支持拖拽、动态排序或存在重复值，应改用唯一 ID）；
✅ 删除按钮需置于列表项内部，确保语义清晰、操作可达；
✅ 建议添加 CSS 类或内联样式提升可访问性（如 hover 状态、焦点轮廓）；
❌ 避免在 onClick 中直接写 setList(list.filter(...))（虽可行，但对长列表性能略低，且不易复用逻辑）。

? 完整整合示例（精简版）

将上述逻辑嵌入原代码后，关键片段如下：

// ... 其他 useState 和事件处理保持不变

const deleteTodo = (index: number) => {
  setList(prev => prev.filter((_, i) => i !== index)); // 替代 splice 的函数式写法（同样推荐）
};

return (
  
    
      My Todo list
    

    {list.length === 0 ? (
      No tasks yet. Add one above!
    ) : (
      list.map((el, index) => (
        
          {el}
          
        
      ))
    )}

    {/* 输入框与添加按钮保持不变 */}
    
    
  
);