react.js map遍历的问题

Posted 2020-10-22 axl234

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