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

import uniqueId from 'lodash/uniqueId'

在指定key的时候调一下:

 <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. bs4的简单应用之防止xss攻击和文本截断

    BeautifulSoup可以过滤html标签,根据这个功能我们可以防止xss攻击和进行文本过滤 1. 安装 pip install beautifulsoup4 2.导入.使用 from bs4 i ...

  2. I Like for You to Be Still【我会一直喜欢你】

    I Like for You to Be Still I like for you to be still 我会一直喜欢这你 It is as though you are absent 就算你并不在 ...

  3. 常州大学新生寒假训练会试 I 合成反应

    题目描述 有机合成是指从较简单的化合物或单质经化学反应合成有机物的过程. 有时也包括从复杂原料降解为较简单化合物的过程. 由于有机化合物的各种特点,尤其是碳与碳之间以共价键相连,有机合成比较困难,常常 ...

  4. P1101 单词方阵

    题目描述 给一 n \times nn×n 的字母方阵,内可能蕴含多个"yizhong"单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 88 个方向的任一方向,同一单词摆放 ...

  5. volatile、synchronized、lock有什么区别,以及在哪些场景下使用哪种方式?

    [转]JVM锁机制volatile/synchronized/lock 1.volatile实现原理 (1)聊聊并发(一)——深入分析Volatile的实现原理 --硬件级别锁实现,Lock前缀指令会 ...

  6. FSMO

    FSMO 编辑 本词条缺少信息栏.名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! FSMO是Flexible single master operation的缩写,意思就是灵活单主机操 ...

  7. IOS开发---菜鸟学习之路--(十四)-将BASE64图片转换成Image

    本文基本全部都是代码 首先是.H文件 #import <Foundation/Foundation.h> @interface Base64AndImageHelp : NSObject ...

  8. 33、Android Support兼容包详解(转载)

    原文转自:微信分享 2015-03-31 22:11 背景 来自于知乎上邀请回答的一个问题Android中AppCompat和Holo的一个问题?, 看来很多人还是对这些兼容包搞不清楚,那么干脆写篇博 ...

  9. MongoDB快速入门学习笔记7 MongoDB的用户管理操作

    1.修改启动MongoDB时要求用户验证加参数 --auth 即可.现在我们把MongoDB服务删除,再重新添加服务 mongod --dbpath "D:\work\MongoDB\dat ...

  10. Python+Selenium练习篇之17-断言页面标题

    继续来介绍一个Selenium中页面title断言方法. 相关脚本代码如下: # coding=utf-8 import time from selenium import webdriver dri ...