假设 你的key设置为map中的索引，假设为0，1，2（原dom树），现在你用splice删除掉1，重新渲染时，还是会按map索引按顺序渲染为0，1（新dom树），由于react渲染机制是比较的key值，发现key（0，1）都没变，所以保留原dom树的0，1元素（包括里面内容都不变），而由于数量少了一个，渲染的最后一个就没有渲染，就感觉是删除的最后一个。

react使用map生成的元素，key的设定不对导致每次删除都删除最后一个的更多相关文章

  1. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  2. 关于React中,map出来的元素添加事件问题

    用es6 map 的写法 直接绑定一个onTouchStart 事件不会报错. 用es5的map写法  如果不加上this  会报这个错误 无法读取未定义的属性 解决的方法是 绑定this  就可以了

  3. React map生成元素添加点击事件绑定this

    问题 使用.map(function(Item)生成元素添加onClick事件:onClick={this.provinceChange.bind(this, "99")}时,前台 ...

  4. Map四种获取key和value值的方法，以及对map中的元素排序（转）

    获取map的值主要有四种方法,这四种方法又分为两类,一类是调用map.keySet()方法来获取key和value的值,另一类则是通过map.entrySet()方法来取值,两者的区别在于,前者主要是 ...

  5. react.js map遍历的问题

    React遍历多个Ant Design中的Upload组件时,随意删除任一个Upload出现了bug,依次点击上传图片后,当点击删除时,倒着删除没有问题,从中间和从开头删问题出现了,出现了类似塌方的效 ...

  6. vue 项目， 通知子组件更新，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

  7. React源码解析之React.Children.map()(五)

    一,React.Children是什么? 是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具,是顶层的api之一 二,Re ...

  8. foreach属性-动态-mybatis中使用map类型参数，其中key为列名，value为列值

    http://zhangxiong0301.iteye.com/blog/2242723 最近有个需求,就是使用mybatis时,向mysql中插入数据,其参数为map类型,map里面的key为列名, ...

  9. vector、map 判断某元素是否存在、查找指定元素

    一.vector 1.判断某元素是否存在 vector<string> vStr; int nRet = std::count(vStr.begin(), vStr.end(), &quo ...

随机推荐

  1. TCP连接的建立与终止

    TCP/IP详解学习笔记(13)-- TCP连接的建立与终止 1.TCP连接的建立            设主机B运行一个服务器进程,它先发出一个被动打开命令,告诉它的TCP要准备接收客户进程的连续请 ...

  2. 基于Redis缓存的Session共享(附源码)

    基于Redis缓存的Session共享(附源码) 在上一篇文章中我们研究了Redis的安装及一些基本的缓存操作,今天我们就利用Redis缓存实现一个Session共享,基于.NET平台的Seesion ...

  3. MVP社区巡讲

    MVP社区巡讲照片集 今天MVP社区巡讲在北京利星行微软大厦连同SQL PASS社区合办了一次线下活动,这次互动汇集了在北京大多数的微软MVP,他们都是微软认可的有着各微软产品和技术特长的技术专家,无 ...

  4. [Android开发常见问题-11] Unable to execute dex: Multiple dex files define 解决方法

    最近在开发一个工程,其中用到了一个开源的库项目Android-ViewPagerIndicator. 这个项目是作为一个库出现的,如下图: 这个项目中包含了android-support-v4.jar ...

  5. jquery 表单 清空

    做了个复杂查询的页面,字段太多了,填了一次,想清空挺麻烦的 $('#myform')[0].reset(); 虽然reset方法可以做到一部分,但是如果你有个元素是这样的 <input name ...

  6. jquery跨域请求数据

    jquery跨域请求数据 jquery跨越请求数据.实际开发中经常会碰到两个网站数据交互问题,当向另一个站点请求数据该如何做? 实际上非常容易,请按照下面的步骤做: 第一:编写js,通过get获取远程 ...

  7. linux下http服务器开发

    linux下http服务器开发 1.mystery引入 1)超文本传输协议(HTTP)是一种应用于分布式.合作式.多媒体信息系统的应用层协议 2)工作原理 1)客户端一台客户机与服务器建立连接后,会发 ...

  8. JS高程5.引用类型（5）Array类型的操作方法

    一.操作方法 1.concat()方法 基于当前数组中的所有项创建一个新数组.具体说,是先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组.在没有给concat() ...

  9. ClickOnce部署疑难杂症:更新时部署与应用程序标识不一致问题。要安装此应用程序，请修改此文件的清单版本或卸载之前存在的应用程序。

    使用ClickOnce部署winform应用程序.无论是安装或者自动更新都极为方便,但有时候一些疑难杂症也令人头疼 1.注意每次部署完成之后 setup.exe无需覆盖,只需要在Application ...

  10. Js-Html 前端系列--全选，反选

    /* 全选 */ $("#selectedAll").click(function(){ var boxcList = $(".boxc");var boxcL ...