React开发中通过id选择元素时获取到错误元素问题求解

问题1：删除第一个元素后控制台打印剩余元素是否正常 #

是正常现象。你的代码逻辑是遍历数组删除匹配id的元素后，通过filter过滤掉被delete置空的元素，得到的filtered本身就是删除操作后剩余的有效元素，打印结果符合预期。

现有代码的问题及动画类加错的原因 #

1. 直接修改原state，违反React状态不可变原则
   const newResList = this.state.resolutions是引用赋值，你后续执行delete操作时直接修改了原state数组，会导致React状态更新逻辑混乱，是出现不可预期行为的核心诱因之一。
2. 操作数组的逻辑冗余且不规范
   完全不需要先遍历删除元素再过滤空值，直接用filter筛选出不符合删除条件的元素即可，代码更简洁也不会出现中间态的空值元素。
3. 列表渲染未正确使用key属性（大概率）
   如果你的列表渲染时用了数组索引作为key，删除第一个元素后，原第二个元素的索引会变成0，React会直接复用原来第一个元素的DOM节点，这时候你手动拿DOM修改类名必然会匹配到错误的元素。
4. 手动操作DOM不符合React设计逻辑
   React是状态驱动UI，手动获取DOM修改类的方式很容易和React的DOM更新逻辑冲突，导致类名应用错误。

优化方案 #

handleRemoveItem(id) {
  // 先浅拷贝原state数组，不直接修改原状态
  const newResList = [...this.state.resolutions];
  // 直接filter得到删除后的数组，不需要多余的遍历+delete操作
  const filtered = newResList.filter(item => item.k !== id);
  this.setState({resolutions: filtered});
}

如果需要实现退场动画：

• 列表渲染时，必须给每个条目设置唯一key，值用你每个元素自带的唯一标识k，绝对不要用数组索引
• 不要手动操作DOM加动画类，推荐使用react-transition-group库处理列表的进场退场动画，会自动处理DOM节点的类名绑定和生命周期，避免出现类名加错的问题
• 确认你的DOM元素id生成规则唯一，title + k不能出现重复，否则getElementById本身就会返回错误的节点

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