本文讲解如何使用 react 的 usestate hook 管理待办任务列表，解决“点击删除按钮误删全部任务”这一常见问题，通过索引精准删除指定任务，并确保状态更新与 dom 渲染同步。
本文讲解如何使用 react 的 usestate hook 管理待办任务列表，解决“点击删除按钮误删全部任务”这一常见问题，通过索引精准删除指定任务，并确保状态更新与 dom 渲染同步。
在 React 应用中构建待办列表时，直接操作 DOM（如 document.createElement、appendChild）不仅违背 React 的声明式编程范式，还会导致状态与视图严重脱节。你原始代码中使用全局数组 taskArr 和手动 DOM 操作，使得 handleDel 无法区分是哪个按钮被点击，最终循环删除所有任务；同时 useState 的 deleteTask 状态未被实际用于控制渲染逻辑，形同虚设。
正确的做法是：完全交由 React 控制 UI 渲染，用 useState 管理任务数据，借助 map 动态生成列表项，并为每个删除按钮绑定携带唯一索引的事件处理器。
以下是优化后的完整实现：
import React, { useState, useRef } from 'react';
import DelIcon from './assets/close-btn.png';
import './styling/home.scss';
function Task(todo) {
this.todo = todo;
}
function Home() {
const [tasks, setTasks] = useState([]);
const inputRef = useRef();
const handleDelete = (index) => {
setTasks(prev => prev.filter((_, i) => i !== index));
};
const handleClick = () => {
const todoText = inputRef.current.value.trim();
if (!todoText) return; // 防止空任务
const newTask = new Task(todoText);
setTasks(prev => [...prev, newTask]);
inputRef.current.value = '';
};
return (
<div id='home-container'>
<input
type='text'
ref={inputRef}
maxLength={40}
placeholder="Enter a task..."
/>
<button onClick={handleClick}>Add</button>
<div className='task-container'>
{tasks.length === 0 ? (
<p className="empty-state">No tasks yet. Add your first one!</p>
) : (
tasks.map((task, index) => (
<div className='task-div' key={index}>
<p>{task.todo}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11824" title="shopify-app-react-router"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="shopify-app-react-router" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11824" title="shopify-app-react-router">shopify-app-react-router</a>
<p>构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G</p>
</div>
<a href="/xiazai/skill11824" title="shopify-app-react-router" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<button
className='delete-btn'
onClick={() => handleDelete(index)}
aria-label={`Delete task: ${task.todo}`}
>
<img src={DelIcon} alt='delete' />
</button>
</div>
))
)}
</div>
</div>
);
}
export default Home;✅ 关键改进点说明：
- ✅ 状态驱动渲染：tasks 数组作为单一可信数据源，所有 UI 变更均通过 setTasks 触发重新渲染；
- ✅ 精准删除：handleDelete(index) 利用 filter 创建新数组，仅排除目标索引项，避免副作用；
- ✅ 自动键管理：key={index}（适用于无动态重排序场景）确保 React 高效更新 DOM；
- ✅ 健壮性增强：添加空值校验、占位提示和可访问性标签（aria-label）；
- ❌ 移除危险操作：彻底弃用 document.createElement、appendChild 和全局变量，杜绝状态不一致风险。
⚠️ 注意事项：
- 若任务支持拖拽排序或需根据 ID 删除（而非索引），建议改用唯一 id 字段（如 Date.now() 或 uuid），并用 filter(task => task.id !== targetId) 删除；
- 不要将 ref 用于存储状态——始终优先使用 useState；
- key 应稳定且唯一，避免在列表可能增删时使用 index 作为 key（本例因仅追加+删除末尾，暂可接受；生产环境推荐 id）。
掌握这种“数据即真理、UI 即快照”的思维，是写出可维护 React 应用的核心基础。
