React遍历多个Ant Design中的Upload组件时，随意删除任一个Upload出现了bug，依次点击上传图片后，当点击删除时，倒着删除没有问题，从中间和从开头删问题出现了，出现了类似塌方的效果，要删除的Upload元素下面的Upload的元素下面的内容没有了。解决方法：将map遍历中的key={index}改为key={item}
import { Upload, message, Button, Icon } from ‘antd‘;class UploadImageContainer extends Component{ ???consructor(props){ ???????super(props); ???????this.state = { ???????????arr:[0, 1, 3] ???????}; ???} ???????removeItem=(delItem)=>{ ???????this.setState(preState=>({ ???????????arr: preState.arr.filter(item=>item !== delItem) ???????})); ???}; ???????render(){ ???????return( ???????????<div> ???????????????{ ???????????????????this.state.arr.map((item, index)=>( ???????????????????????<div key={index}> ????????????????????????????<Upload {...props}> ????????????????????????????<Button> ??????????????????????????????????<Icon type="upload" /> Click to Upload ????????????????????????????</Button> ????????????????????????????<button onClick={()=>removeItem(item)}>删除{item}</button> ????????????????????????????</Upload> ??????????????????????</div> ???????????????????)) ???????????????} ???????????</div> ???????????) ???}}export default UploadImageContainer;key是一个字符串，用来唯一标识同父同层级的兄弟元素。当React作diff时，只要子元素有key属性，便会去原v-dom树中相应位置（当前横向比较的层级）寻找是否有同key元素，比较它们是否完全相同，若是则复用该元素，免去不必要的操作。
当React的render里不设置key 或者key={index} 时，每次新挂载的节点都是0（其他节点能在willreceiveprops中接检测到改变），因为逆序之后，最后一个元素是0，而这个元素的key之前是没有的，所以要新增节点。要实现目标，需要通过在App的render中设置key={arr.length-index}(因为本例的数组简单，设key={item}也可以)，告诉react对应的位置不需要重新挂载。
react.js map遍历的问题
原文地址：https://www.cnblogs.com/axl234/p/8390522.html