本文详解 react 列表渲染中因误用数组索引（index）作为 key 所致的删除异常问题——点击任意行“删除”按钮却总是删掉最后一项，并提供基于唯一 id 的健壮修复方案。
本文详解 react 列表渲染中因误用数组索引（index）作为 key 所致的删除异常问题——点击任意行“删除”按钮却总是删掉最后一项，并提供基于唯一 id 的健壮修复方案。
在 React 中动态渲染列表时，为每个子元素指定 key 是强制要求。但一个常见误区是直接使用 map 的 index 作为 key（如
根本原因在于：key 是 React 识别组件身份与复用状态的依据。当使用 index 作 key 时，React 将“第 0 个位置的组件”与“索引 0”强绑定。删除中间某项后，后续元素前移，其 index 发生变化，但 React 仍按旧 key 匹配——导致状态错位（如勾选状态、输入框内容）和逻辑错乱（如 delete1(id) 中的 id 虽打印正确，但实际映射到已移动的 DOM 节点）。
以下为修复后的完整代码（关键改动已高亮）：
import { useState } from 'react';
// ✅ 使用唯一 ID 替代 index 作为 key 和数据标识
function Row({ id, delete1 }) {
const [check, setCheck] = useState(false);
const checkmark = () => {
console.log(`Row ${id}: checkmark clicked`);
setCheck(!check);
};
const message = check ? "task completed" : "task not completed";
const even = id % 2 === 0 ? "even" : "odd";
return (
<div>
<input type="checkbox" onClick={checkmark} />
<input type="text" />
{/* ✅ 点击时传入真实唯一 id */}
<button onClick={() => delete1(id)}>Delete Task</button>
<span>{message}</span>
<span>{even}</span>
</div>
);
}
function Display({ inputs, delete1 }) {
return (
<div>
{/* ✅ 使用 item.id 作为 key，确保 key 静态且唯一 */}
{inputs.map((item) => (
<Row key={item.id} id={item.id} delete1={delete1} />
))}
</div>
);
}
function App() {
const [arr, setArr] = useState([]);
// ✅ 添加新任务时生成唯一 ID（此处用时间戳模拟，生产环境推荐 uuid 或 nanoid）
const addRow = () => {
setArr((prev) => [...prev, { id: Date.now() }]);
};
// ✅ 删除逻辑：根据 item.id 过滤，而非 index
const delete_arr = (targetId) => {
setArr((prev) => prev.filter((item) => item.id !== targetId));
};
return (
<>
<header>TO DO LIST</header>
<Display inputs={arr} delete1={delete_arr} />
<button onClick={addRow}>Add New Task</button>
</>
);
}
export default App;关键修复点总结：
- ? Key 必须静态唯一：改用数据自身的 id 字段（如 item.id）作为 key，而非 index；
- ? ID 与数据绑定：在 addRow 中为每个新任务生成唯一 id 并存入数组项，确保 id 是数据固有标识；
- ? 删除逻辑对齐：delete_arr 函数严格按 item.id 过滤，与 key 和事件参数保持一致；
- ⚠️ 注意事项：避免使用 Math.random() 或 Date.now() 在同一批次渲染中重复调用（可能导致冲突），生产环境应使用 uuidv4() 等可靠库生成 ID。
此方案彻底解耦了 UI 渲染顺序与数据标识，使增删改操作完全可预测，是 React 列表渲染的最佳实践。
