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对应的位置不需要重新挂载。
