React移除数组元素后重新渲染仅删除最后一项的问题

嘿，这个问题我之前也踩过坑！你遇到的“移除元素后React只删最后一项”的问题，核心原因就是你用数组索引作为<Tag>组件的key值了。

React的Diff算法是靠key来识别每个组件的唯一性的。当你移除数组里的某个元素后，后面所有元素的索引都会往前挪一位。这时候React会对比新旧数组的key：它不会去检查元素的实际内容，只会看key有没有变化。举个实际的例子：

假设原数组是["苹果", "香蕉", "橙子"]，对应的key是0、1、2。当你删掉"香蕉"后，数组变成["苹果", "橙子"]，新的key变成0、1。React会觉得：key0还是"苹果"，保留；key1原来对应"香蕉"，现在变成"橙子"，那干脆把原来的"香蕉"组件内容改成"橙子"；key2不见了，那就删掉最后一个组件。结果就是看起来像是删了最后一项，但实际是把"橙子"移到了"香蕉"的位置，然后删掉了原来的"橙子"组件。

解决步骤 #

• 换掉索引，用唯一且稳定的key：找每个tag对象里的唯一标识，比如如果你的tag有id属性，直接用key={tag.id}；如果是字符串且每个都不重复，也可以直接用key={tag}（但如果有重复字符串的话，还是得加唯一ID）。
• 修改后的代码示例：

<View style={[styles.container, this.props.style]}>
  {this.props.items.map((tag) => (
    <Tag 
      key={tag.id} // 这里替换成tag的唯一标识
      value={tag} 
      style={[styles.tag, this.props.tagStyle]} 
      onRemoveTag={this.removeTag.bind(this)}
    />
  ))}
</View>

• 如果你的tag没有自带唯一ID，也可以手动生成：比如在创建items数组的时候，给每个元素加一个自增ID或者uuid，确保不管数组怎么变，每个元素的key都不会变。

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