假设 你的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. HDU--杭电--3415--Max Sum of Max-K-sub-sequence--队列--双向队列

    Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  2. hdu4284之字典树

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. hdu 3333 Turing Tree（线段树+离散化）

    刚看到是3xian大牛的题就让我菊花一紧,觉着这题肯定各种高端大气上档次,结果果然没让我失望. 刚开始我以为是一个普通的线段树区间求和,然后啪啪啪代码敲完测试没通过,才注意到这个求和是要去掉相同的值的 ...

  4. Linux：用at和crontab调度作业

    一.有2种作业调度方式 1.突发性的,就是只运行作业一次而不是定期运行,使用at命令. 例如在进程A运行一段时间后关闭该进程. 2.定期运行,就是每隔一定的周期运行一次,使用crontab命令. 如每 ...

  5. JS,CSS是前端，JAVA PHP ASP是后端，数据库是后端的处理对象,非代表前后底

    大海-mysql-oracle(529513481)  19:02:18 象我这边,前台都是php,而php做数据分析是不太理想的,做中间件没人力,难办 横瓜(601069289) 19:20:15  ...

  6. 关于.NET异常处理的思考（上）

      年关将至,对于大部分程序员来说,马上就可以闲下来一段时间了,然而在这个闲暇的时间里,唯有争论哪门语言更好可以消磨时光,估计最近会有很多关于java与.net的博文出现,我表示要作为一个吃瓜群众,静 ...

  7. java基础练习 10

    import java.util.Scanner; public class Tenth { /*有n个整数,使其前面各数顺序向后移m个位置,最后m个数变成最前面的m个数*/ public stati ...

  8. jQuery 效果 - fadeTo() 方法

    实例 使用淡出效果来隐藏一个 <p> 元素: $(".btn1").click(function(){ $("p").fadeTo(1000,0.4 ...

  9. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  10. phpwamp单身狗模式的详解与分析，单身狗模式/即霸体模式的作用讲解。

    最近有学生在使用PHPWAMP的时候,问我霸体模式的作用. 学生问:老师,PHPWAMP里面的霸体模式是什么意思,有什么用? 回答:额...就是以前我发布测试版的时候,模式切换里面的单身狗模式. 学生 ...