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遍歷的問題