React仅在重新渲染时从数组中删除最后一项

Question

从数组中删除项目会导致React仅删除该渲染数组中的最后一项而不是实际删除的元素。这是代码：

<View style={[styles.container, this.props.style]}>
      {this.props.items.map((tag, i) => <Tag key={i}
                                             value={tag}
                                             style={[styles.tag, this.props.tagStyle]}
                                             onRemoveTag={this.removeTag.bind(this)}/>)}
    </View>

Answer 1

将组件的键更改为组件唯一可识别的键而不是索引似乎可以解决问题：

<View style={[styles.container, this.props.style]}>
      {this.props.items.map(tag => <Tag key={tag}
                                             value={tag}
                                             style={[styles.tag, this.props.tagStyle]}
                                             onRemoveTag={this.removeTag.bind(this)}/>)}
    </View>

数组重新渲染的比较必须使用键而不是组件本身来完成。