react 列表渲染时若用数组索引（index）作为 key，删除中间项会导致状态错乱、实际删除末尾元素——根本原因是索引 key 不稳定，与数据真实身份脱钩。
react 列表渲染时若用数组索引（index）作为 key，删除中间项会导致状态错乱、实际删除末尾元素——根本原因是索引 key 不稳定，与数据真实身份脱钩。
在 React 中，key 不仅是渲染优化的标识符，更是 React 识别列表中元素身份、协调 DOM 更新与状态映射的核心依据。当您使用 index 作为 key（如
问题复现与根源分析
在您的代码中：
- Display 组件通过 inputs.map((_, index) =>
) 渲染；
- 删除逻辑 delete_arr(id) 使用 arr.filter((_, idx) => idx !== id)，依赖 id 等于原始索引；
-
但当删除第 1 项（index=1）后，原 index=2、3… 的元素集体前移，其 id 属性仍为旧索引值，而新渲染时 key={index} 却已重新计算为 0、1、2…
→ React 认为“新 key=1”对应的是“旧 key=2”的组件实例，于是复用其状态（包括 check 的 useState 值），同时 delete1(id) 调用传入的仍是过期的 id，最终表现为“点击任意删除按钮都只删掉最后一个”。
正确解法：使用稳定、唯一、不可变的 key
应为每条数据分配一个独立于位置、生命周期内不变的标识符（如 UUID、时间戳+随机数、或业务主键）。修改关键代码如下：
import { v4 as uuidv4 } from 'uuid'; // 推荐：npm install uuid
function App() {
const [arr, setArr] = useState([]);
function addRow() {
setArr((prev) => [...prev, { id: uuidv4() }]); // ✅ 为每条数据生成唯一静态 ID
}
function delete_arr(targetId) {
setArr((prev) => prev.filter(item => item.id !== targetId)); // ✅ 按数据 ID 过滤，而非索引
}
return (
<react.fragment><header>TO DO LIST</header><display inputs="{arr}" delete1="{delete_arr}"></display><button onclick="{addRow}">Add New Task</button>
</react.fragment>
);
}
function Display({ inputs, delete1 }) {
return (
<div>
{inputs.map((item) => ( // ✅ 直接解构 item，不再依赖 index
<row key="{item.id}" id="{item.id}" delete1="{delete1}"></row>
))}
</div>
);
}
function Row({ id, delete1 }) {
const [check, setCheck] = useState(false);
const checkmark = () => setCheck(prev => !prev);
const message = check ? "task completed" : "task not completed";
const even = id.charCodeAt(0) % 2 === 0 ? "even" : "odd"; // 示例：用 ID 字符哈希模拟奇偶判断（避免依赖索引）
return (
<div>
<input type="checkbox" checked onchange="{checkmark}"><input type="text"><button onclick="{()"> delete1(id)}>Delete Task</button>
<span>{message}</span>
<span classname="{even}">{even}</span>
</div>
);
}
关键注意事项
- ❌ 永远不要将 index 用作 key，除非列表是静态的（无增删/排序）；
- ✅ key 必须在兄弟节点间唯一，且不能在渲染周期中改变；
- ✅ 删除逻辑应基于数据自身的唯一标识（如 item.id），而非渲染时的临时索引；
- ✅ 若无法引入第三方库（如 uuid），可使用 Date.now() + Math.random() 生成简易唯一 ID（开发环境可用，生产建议用真正 UUID）；
- ✅ 在 Row 组件中， 应受控（添加 value 和 onChange），当前示例为简化聚焦 key 问题，实际应用需补全。
遵循此模式，列表增删将完全符合直觉：点击哪一行的删除按钮，就精准移除对应数据，状态与 UI 严格同步。这是 React 列表渲染的基石原则，也是构建可靠交互式 UI 的必备实践。
