如何解决React中.map()渲染列表删除组件总是删最后一个的问题？

你遇到的问题核心是使用数组索引作为React组件的key，这会导致React的diff算法无法正确识别被删除的元素，进而出现“删除任意元素都看起来像是删掉最后一个”的现象。

为什么会这样？ #

React依赖key来追踪列表中每个元素的身份。当你用索引作为key时，删除数组中的某个元素后，剩余元素的索引会重新排序：比如删除索引0的元素后，原来索引1的元素会变成新的索引0，索引2变成索引1……以此类推。React会认为最后一个索引对应的元素被移除，所以会卸载最后一个组件，而不是你实际删除的那个——这和你调试时看到的“数组确实正确删除了元素，但渲染不对”完全吻合。

具体修复步骤 #

你的components数组中存储的是components.length（每个元素是创建时的数组长度，比如第一个元素是0，第二个是1，第三个是2），这些值是唯一且不会随数组变化而改变的，刚好可以用来作为key。

1. 修改EventCell.tsx中的列表渲染逻辑

把key={index}替换为key={events}（建议把变量名改成eventId更清晰）：

{components.map((eventId, index) => (
    <Event
        key={eventId}
        index={index}
        onDelete={() => deleteEvent(index)}
    />
))}

2. 优化删除逻辑（避免闭包问题）

原删除逻辑中直接使用当前components数组的拷贝，可能因为React状态更新的闭包特性导致意外问题，改用函数式更新来获取最新的状态：

const deleteEvent = (index: number) => {
    setComponents(prevComponents => prevComponents.filter((_, i) => i !== index));
    setRenamingEventNow(false);
};

额外说明 #

• 永远不要用索引作为列表元素的key，除非列表是完全静态的（不会增删、不会改变顺序）。
• 你的components数组存储的唯一标识刚好满足key的要求，如果后续需要存储更多事件信息（比如名称、时间），建议给每个事件生成唯一ID（比如用crypto.randomUUID()），作为更可靠的key。

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