在做一个基于react的应用的时候遇到了对列表拖动排序的需求。当使用sortable对列表添加排序支持后发现一个问题:数据正确排序了,但是dom的顺序却乱了,找了一会儿原因后发现是因为在渲染数据的时候指定了一个动态的key(map((o,i)=>(<li key={i}></li>))),导致了dom顺序混乱。解决方案有:将数据装入模型的时候生成一个不重复的key,或者使用lodash的uniqueId:

  1. import uniqueId from 'lodash/uniqueId'

在指定key的时候调一下:

  1. <li data={photo} key={uniqueId()} index={j}></li>

记一个react拖动排序中的坑:key的更多相关文章

  1. sort排序中的坑

    问题的产生原因: 在一篇阿里面试题的跟帖中,很多人应用sort()方法对数组进行排序.看似合情合理的代码,运行结果却频频出错.为什么呢?因为很多人都忽略掉了一点,那就是sort()排序默认情况下是按A ...

  2. react项目构建中的坑—淘宝镜像安装后要设置

    基本的搭建步骤参考博客:https://blog.csdn.net/qq_27727251/article/details/86593415 这里要强调的坑是:安装完淘宝镜像要将其设置为默认Regis ...

  3. 记一个VS连接过程中找不到cpp的解决方法

    在新增几个qt页面时,发现原来没动的几个cpp 连接报错了,错误均是qt的相关文件找不到 应该是moc文件没有生产或者没有被包含进工程.我想着既然我没动,应该不会是moc的原因,就在其他方向解决了很久 ...

  4. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  5. Nancy总结(二)记一次Nancy 框架中遇到的坑

    记一次Nancy 框架中遇到的坑 前几天,公司一个项目运行很久的Nancy框架的网站,遇到了一个很诡异的问题.Session 对象跳转到另外一个页面的时候,session对象被清空了,导致用户登录不上 ...

  6. 记一个常见的ms sql server中取第N条记录的方法

    前言 好好学习,天天向上. 正文 好像也是一个不难的问题,刚视频里看到的,就记一下吧. 下面是表中原始的数据结构,做了一个倒叙排序: select * from Employee order by S ...

  7. 记一次SpringBoot 开发中所遇到的坑和解决方法

    记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型出现空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Inte ...

  8. 隐藏 FastAdmin 列表中的拖动排序按钮

    隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...

  9. [PHP] 算法-统计一个数字在排序数组中出现的次数的PHP实现

    统计一个数字在排序数组中出现的次数. 1.有序的数组查找,使用二分法 2.二分法查找第一次出现的位置,二分法查找最后一次出现的位置,end - start +1 left=getLeft(data,k ...

随机推荐

  1. Python 日常报错总结

    本章内容 requests模块报错 执行:res = requests.post(api,mdata = post_data) 报错:SSLError: EOF occurred in violati ...

  2. 使用 Dom4j 将 XML 转换为 MAP

    本文为转载:http://blog.sina.com.cn/s/blog_6145ed810100z164.html  原文地址. 自己仅作备忘录方便查找留了一份. 这是解析Xml 的辅助类 pack ...

  3. 【网易严选】iOS持续集成打包(Jenkins+fastlane+nginx)

    本文来自网易云社区 作者:孙娇 严选iOS客户端的现有打包方式是通过远程连接打包机执行脚本去打包,打完包会输出相应的ipa的二维码,扫一扫二维码可以安装,但是随着测试队伍的壮大,外包同学越来越多,在打 ...

  4. 申请社交平台appkey详细教程

    申请社交平台appkey详细教程 大部分app都需要实现分享到微信.微博等社交平台的功能,但是在各个平台上申请appkey是一件很繁琐的事情.现在来分享一个申请社交平台appkey详细教程,在开发过程 ...

  5. PostgreSQL 行排序详解

    在查询生成输出表之后,也就是在处理完选择列表之后,你还可以对输出表进行排序. 如果没有排序,那么行将以不可预测的顺序返回(实际顺序将取决于扫描和连接规划类型和在磁盘上的顺序, 但是肯定不能依赖这些东西 ...

  6. Redis的 SORT命令

      SORT key [BY pattern] [LIMIT offset count] [GET pattern [GET pattern ...]] [ASC | DESC] [ALPHA] [S ...

  7. 理解机器为什么可以学习(五)---Noise and Error

    之前我们讨论了VC Dimension,最终得到结论,如果我们的hypetheset的VC Dimension是有限的,并且有足够的资料,演算法能够找到一个hypethesis,它的Ein很低的话,那 ...

  8. Python之实现不同版本线程池

    1.利用queue和threading模块可以实现多个版本的线程池,这里先贴上一个简单的 import queue import time import threading class ThreadP ...

  9. 用例UML图

    用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图中涉及的关系有:关联.泛 ...

  10. PAT1026

    要获得一个C语言程序的运行时间,常用的方法是调用头文件time.h,其中提供了clock()函数,可以捕捉从程序开始运行到clock()被调用时所耗费的时间.这个时间单位是clock tick,即“时 ...