React Context数组删除功能异常，相同类型组件总是删除最后一项排查

你遇到的渲染异常是React列表渲染key属性使用错误导致的：

• 你在Board组件的map循环中给外层div绑定的key是数组索引i，当数组中存在多个同类型组件（比如3个Note）时，React的Diff算法会认为索引相同的项是同一个组件，直接复用已有组件实例，只会移除消失的索引对应的DOM。你删除中间某一项后，数组长度减1，最后一个索引消失，视觉上就表现为删除了最后一项；当数组中存在不同类型组件时，组件类型差异会触发React重新渲染对应项，所以删除功能表现正常。
• 你打印的数组内容正确但渲染不符，就是因为React复用了同类型组件的实例，没有更新时没有替换对应位置的组件内容。

1. 修正列表渲染的key值
   在Board组件的map循环中，把key从索引改为每个元素唯一的id即可：

// 原来的代码
<div key={i}>
// 修改为
<div key={component.id}>

2. 优化删除逻辑写法（非必须，符合React不可变数据原则，避免潜在问题）
   你当前使用splice直接修改了原state数组，违反了React state不可变的规范，建议改用filter生成新数组：

const deleteComponent = (id: any) => {
  setComponents(components.filter(item => item.id !== id))
}

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